Question

我需要设置4个部分的布局，类似于表，但只使用div和CSS。这是所需的输出：

Logo-----------Info
Business-------Client

我虽然它就像设置Float属性一样简单，但如果我为Logo和Info左右设置该属性，那么Business并且Client div出现在它们之间而不是在它们之下而不是期望的结果。

Logo----Business----Client---Info

代码：http://jsfiddle.net/YMh3C/304/

我希望修复代码，但最重要的是我想了解为什么会出现这种情况。

＆＃13;

#logo {
  float: left;
  text-align: center;
}

#info {
  float: right;
  text-align: center;
}

#business {
  float: left;
  text-align: center;
}

#client {
  float: right;
  text-align: center;
}

＆＃13;

<section>
  <div id="logo">
    <div>{{ Logo }}</div>
    <div>{{ Logo }}</div>
    <div>{{ Logo }}</div>
    <div>{{ Logo }}</div>
    <div>{{ Logo }}</div>
  </div>
  <div id="info">
    <div>{{ Info }}</div>
    <div>{{ Info }}</div>
    <div>{{ Info }}</div>
    <div>{{ Info }}</div>
    <div>{{ Info }}</div>
  </div>
  <div id="business">
    <div>{{ temp_business1 }}</div>
    <div>{{ temp_business2 }}</div>
    <div>{{ temp_business3 }}</div>
    <div>{{ temp_business4 }}</div>
    <div>{{ temp_business5 }}</div>
    <div>{{ temp_numerodefactura }}</div>
    <div>{{ temp_fechadefactura }}</div>
  </div>
  <div id="client">
    <div>{{ temp_client1 }}</div>
    <div>{{ temp_client2 }}</div>
    <div>{{ temp_client3 }}</div>
    <div>{{ temp_client4 }}</div>
    <div>{{ temp_client5 }}</div>
  </div>
</section>

＆＃13;

Answer 1

只需在clear:both div之后添加info的div或在clear:both

中添加#business css

#logo {
  float: left;
  text-align: center;
}

#info {
  float: right;
  text-align: center;      
}

#business {
  float: left;
  text-align: center;
  clear:both;
}

#client {
  float: right;
  text-align: center;
}
.clear {
  clear:both;
}

<section>
  <div id="logo">
    <div>{{ Logo }}</div>
    <div>{{ Logo }}</div>
    <div>{{ Logo }}</div>
    <div>{{ Logo }}</div>
    <div>{{ Logo }}</div>
  </div>
  <div id="info">
    <div>{{ Info }}</div>
    <div>{{ Info }}</div>
    <div>{{ Info }}</div>
    <div>{{ Info }}</div>
    <div>{{ Info }}</div>
  </div>
  <div class="clear"></div>
  <div id="business">
    <div>{{ temp_business1 }}</div>
    <div>{{ temp_business2 }}</div>
    <div>{{ temp_business3 }}</div>
    <div>{{ temp_business4 }}</div>
    <div>{{ temp_business5 }}</div>
    <div>{{ temp_numerodefactura }}</div>
    <div>{{ temp_fechadefactura }}</div>
  </div>
  <div id="client">
    <div>{{ temp_client1 }}</div>
    <div>{{ temp_client2 }}</div>
    <div>{{ temp_client3 }}</div>
    <div>{{ temp_client4 }}</div>
    <div>{{ temp_client5 }}</div>
  </div>
</section>

Answer 2

从您当前的css中，最简单的方法是将clear: left;添加到#business

这会强制下一个浮动在前一个左下方移动。同时也将客户端div移动。

#business {
  clear: left
  float: left;
  text-align: center;
}

在此之后，您可以使用填充/边距来播放最终结果。

Answer 3

如果您使用的是float，那么您必须放置clear: both;属性，以便将即将到来的部分保留在新行中。

有关详细信息，请参阅https://css-tricks.com/all-about-floats/

现在，您可以在clear: both;

之后添加#info的空白div

Answer 4

这就是您需要的所有内容，请尝试避免浮动并使用表格单元格

section{
  display:table;
  width:100%;
}
section > div{
  width: 50%;
  text-align: center;
  display: inline-block;
}

<section>
  <div id="logo">
    <div>{{ Logo }}</div>
    <div>{{ Logo }}</div>
    <div>{{ Logo }}</div>
    <div>{{ Logo }}</div>
    <div>{{ Logo }}</div>
  </div>
  <div id="info">
    <div>{{ Info }}</div>
    <div>{{ Info }}</div>
    <div>{{ Info }}</div>
    <div>{{ Info }}</div>
    <div>{{ Info }}</div>
  </div>
  <div id="business">
    <div>{{ temp_business1 }}</div>
    <div>{{ temp_business2 }}</div>
    <div>{{ temp_business3 }}</div>
    <div>{{ temp_business4 }}</div>
    <div>{{ temp_business5 }}</div>
    <div>{{ temp_numerodefactura }}</div>
    <div>{{ temp_fechadefactura }}</div>
  </div>
  <div id="client">
    <div>{{ temp_client1 }}</div>
    <div>{{ temp_client2 }}</div>
    <div>{{ temp_client3 }}</div>
    <div>{{ temp_client4 }}</div>
    <div>{{ temp_client5 }}</div>
  </div>
</section>

Answer 5

要获得所需的输出，您可以简单地为主div提供固定的宽度并将它们全部浮动。我给了50％的宽度。

#logo {
  float: left;
  text-align: center;
  width:50%;
}

#info {
  float: right;
  text-align: center;
  width:50%;
}

#business {
  float: left;
  text-align: center;
  width:50%;
}

#client {
  float: right;
  text-align: center;
  width:50%;
}

<section>
  <div id="logo">
    <div>{{ Logo }}</div>
    <div>{{ Logo }}</div>
    <div>{{ Logo }}</div>
    <div>{{ Logo }}</div>
    <div>{{ Logo }}</div>
  </div>
  <div id="info">
    <div>{{ Info }}</div>
    <div>{{ Info }}</div>
    <div>{{ Info }}</div>
    <div>{{ Info }}</div>
    <div>{{ Info }}</div>
  </div>
  <div id="business">
    <div>{{ temp_business1 }}</div>
    <div>{{ temp_business2 }}</div>
    <div>{{ temp_business3 }}</div>
    <div>{{ temp_business4 }}</div>
    <div>{{ temp_business5 }}</div>
    <div>{{ temp_numerodefactura }}</div>
    <div>{{ temp_fechadefactura }}</div>
  </div>
  <div id="client">
    <div>{{ temp_client1 }}</div>
    <div>{{ temp_client2 }}</div>
    <div>{{ temp_client3 }}</div>
    <div>{{ temp_client4 }}</div>
    <div>{{ temp_client5 }}</div>
  </div>
</section>

Answer 6

要理解它为什么会发生，我们应该看看浮动实际上是如何工作的。想象一下，你有一个带有＃34;左边＆＃34;左边的极地磁铁和＃34;右边的＃34;极地磁铁在右边。盒子的顶部也是向上拉所有块。所以当你放弃＆＃34;左边＆＃34;元素进入一个空盒子，它直接进入左上角，然后你放下一个＆＃34;右边＆＃34;元素，它直接进入右上角。如果你放弃另一个＆＃34;左＆＃34;元素小到足以适应前两个，最后一个完全贴在那里。因为float元素倾向于浮动到边框或另一个元素。

可以在Float specification

找到更科学的解释

如果Float设置，为什么Div会出现在其他div之间？

6 个答案: