腾讯云

文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用float在网页中放置div？

问如何使用float在网页中放置div？
EN

Stack Overflow用户

提问于 2020-12-08 11:40:26

回答 3查看 49关注 0票数 0

我已经做了一个简单的网页使用HTML和CSS。但是，当我调整浏览器的大小时，div会四处移动并失去它们原来的位置。我唯一的限制是我必须坚持使用浮动，而不是使用table等。

我想要我的布局是这样的-

HTML -

<!DOCTYPE html>
<html lang="en">

<body>
    <header>
        <div>
           <h1>Hello</h1>
        </div>   
    </header>

    <div class="a"><b>One</b></div>
    <div class="b"><b>Two</b></div>
    <div class="c"><b>Three</b></div>
    <p>
    <div class="d"><b>Four</b></div>
<body>

CSS -

body {
  padding-top: 5em;
  text-align: center;
}

.a {
  float: left;
  width: 40%;
  vertical-align: middle;
  background-color: #fff;
  line-height: 7em;
  height: 7em;
  margin-left: 20em;
}

.b {
  float: left;
  width: 40%;
  vertical-align: middle;
  background-color: #fff;
  line-height: 7em;
  height: 7em;
  margin-left: 5em;
}

.c {
  float: left;
  width: 40%;
  vertical-align: middle;
  background-color: #fff;
  line-height: 7em;
  height: 7em;
  margin-left: 5em;
}

.d {
  float: left;
  width: 40%;
  vertical-align: middle;
  background-color: #fff;
  height: 7em;
  line-height: 7em;
  margin-left: 65.25%;
  margin-top: 2em;
}

html

css

回答 3

Stack Overflow用户

发布于 2020-12-08 12:12:54

推荐：CSS Flexbox

父级需要以下属性：

display: flex
flex-flow: row-reverse将子项按照want
flex-wrap: wrap的顺序进行布局，以允许它们在父项中均匀分布，两端均无间隙

然后，您需要为子项指定一行的数量，并使用margin定义它们的间距，如下所示：

min-width: calc(100% / AMOUNT_CHILDREN - HORIZONTAL_GAP * 2)，其中AMOUNT_CHILDREN是一行中元素的数量，HORIZONTAL_GAP是也在margin-property中定义的水平间距的数量。

备注：

仅当您希望子项占用指定的空间时，才需要该公式。如果您想让它们在合适的时候扩展或收缩，则不需要设置它。

body {
  display: flex;
  flex-flow: row-reverse;
  flex-wrap: wrap;
  justify-content: space-between;
}
div {
  margin: 0.2rem;
  min-width: calc(100% / 3 - 0.2rem * 2);
  background: gray; /* To show the size of the elements */
}

<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>

CSS Grid

父级需要以下属性：

display: grid
grid-template-columns: repeat(3, 1fr)表示3列，具有相等的space
Optional：gap: X，其中X是元素之间的间距

父元素还需要属性dir="rtl"来从右向左布局子元素(CSS Grid目前不支持更改换行方向，所以我们退回到使用HTML-attribute dir)。

父对象的方向由其子对象继承，这可能是不需要的。若要还原这一点，必须手动将属性dir="ltr"添加到每个子对象。

body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}
div {
  background: gray; /* Only to show the size of the element */
}

<body dir="rtl">
  <div dir="ltr">A</div>
  <div dir="ltr">B</div>
  <div dir="ltr">C</div>
  <div dir="ltr">D</div>
</body>

备注：

HTML是一种标记语言，它的主要目的是通过格式化的方式来传达含义。若要设置标记样式，应使用CSS。

使用HTML -不打算以这种方式使用的样式功能会使标记变得混乱，特别是对于依赖于格式正确的HTML的人(例如，使用屏幕阅读器的盲人)。

当涉及到样式时，总是尝试坚持使用CSS。当然，分组元素，如<div>、<span>等，可以而且仍然应该用于支持样式，并且可能实际上在语义上符合您想要使用它们的方式。

浮动

首先，浮动实际上是为了让周围的元素能够在被浮动的元素周围浮动。这意味着，您想要使用它的方式并不是它的预期用途。因此，我推荐第一种方法(推荐: CSS Flexbox)，但为了完整起见，我将展示如何使用float来实现它。

与Flexbox方法类似，我们可以给我们的孩子一个计算的宽度(有关公式，请参阅推荐的: CSS Flexbox一节)和float: right。

div {
  margin: 0.2rem;
  min-width: calc(100% / 3 - 0.2rem * 2);
  float: right;
  background: gray;
}

<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>

备注：

在我看来，布局应该主要从父级开始应用。

让元素自行布局意味着为了进行调试，您必须检查每个同级元素的CSS规则，以找到问题的原因。

让父级布局其子级会产生更清晰的代码，更有条理的代码结构，并使将来的更改更易于应用。

显然，让父级布局其子级并不总是可能的。position: absolute或类似的东西使得元素必须自己进行布局。

附注：

显然，还有许多其他方法可以实现想要的行为。然而，它们中的一些可能在某种程度上是“老生常谈”的，也可能不是现代方法。用户可以按照要求使用float: right，甚至可以使用JS来放置孩子。

票数 0

Stack Overflow用户

发布于 2020-12-08 11:54:43

有一百万种方法可以按照你想要的方式组织你的网站。这里有一种方法。请看一下我为你做的这个例子。

.container {
  text-align: right;
}

.a {
  display: inline-flex;
  width: 32%;
  background-color: gray;
}

.b {
display: inline-flex;
   width: 32%;
  background-color: gray;
}

.c {
display: inline-flex;
  width: 32%;
 background-color: gray;
}

.d {
display: inline-flex;
 width: 33%;
 background-color: gray;
}

<!DOCTYPE html>
<html lang="en">

<body>
    <header>
        <div>
           <h1>Hello</h1>
        </div>   
    </header>
<div class="container">
    <div class="a"><b>One</b></div>
    <div class="b"><b>Two</b></div>
    <div class="c"><b>Three</b></div>
    <div class="d"><b>Four</b></div>
</div>    
<body>