Question

我有这段代码：

xtree

.smallColumn{
  float:left;
  width: 300px;
  display: inline;
}
.largeColumn{
  width: 1700px;
}

我希望连续的小列适合屏幕。多少，取决于它所查看的屏幕大小。大柱必须位于它所遵循的小柱下方的行上并覆盖enire行。任何剩余的小列都应显示在它下面的行上。我怎样才能做到这一点？

谢谢！

编辑：我似乎没有很好地解释我的问题。举个例子：

大列应该显示在第三个小列下面的行上，所以它在代码下面的下面。当在普通屏幕上显示时，在第一行上有另外3个元素的空间（我将它们编号为清楚）。我希望第4,5和6列忽略大列并显示在第一行。由于第7列和第8列不适合第一行，因此它们应显示在大列下方的一行中。在一个稍大的屏幕上，第一行的第7列就有空间，所以它也应该显示在那里。

Answer 1

如果您不了解它的工作原理，使用浮动布局会导致断开布局问题。

首先，您不需要放置display:inline，因为浮动元素会自动为block元素。

修复你的问题是将float定义为大：

.largeColumn{
  float:left;
  width: 1700px;
}

或者另一个解决方案是移除浮动元素并将其转换为display: inline-block

Answer 2

如果我理解你的问题，你还应该添加float：left到.largeColumn。祝你好运

Answer 3

只需将clear:both添加到.largeColumn（您不必指定width，但当然可以）：

.largeColumn{
    clear: both;
}

来自https://developer.mozilla.org/en-US/docs/Web/CSS/clear：

clear CSS属性指定元素是否可以在旁边在它之前的浮动元素或必须向下移动（清除）在他们之下。

Answer 4

你想要的是使用clear：两者都是大元素。

.largeColumn{clear: both;}

我建议运行MDN - float / clear，因为浮动元素可能会变得棘手：MDN - float。

此处使用您的代码fiddle。

Answer 5

尝试使用flexbox。

＆＃13;

.container {
  display: flex;
  flex-flow: wrap;
}

.smallColumn {
  flex-basis: 300px;
}

.largeColumn {
  flex-basis: 100%;
}

＆＃13;

<div class="container">
  <div class="smallColumn">Small</div>
  <div class="smallColumn">Small</div>
  <div class="smallColumn">Small</div>

  <div class="largeColumn">Large</div>

  <div class="smallColumn">Small</div>
  <div class="smallColumn">Small</div>
  <div class="smallColumn">Small</div>
  <div class="smallColumn">Small</div>
  <div class="smallColumn">Small</div>
</div>

＆＃13;

Answer 6

感谢您使用flex提示。我设法得到了我的解决方案。不是最漂亮的解决方案，但有效

<div class="container">
    <div class="smallColumn">Small</div>
    <div class="smallColumn">Small</div>
    <div class="smallColumn">Small</div>

    <div class="largeColumn"><div class="contentDiv">test test</div></div>
    <div class="smallColumn">Small</div>
    <div class="smallColumn">Small</div>
    <div class="smallColumn">Small</div>
    <div class="smallColumn">Small</div>
    <div class="smallColumn">Small</div>
    <div class="smallColumn">Small</div>
    <div class="smallColumn">Small</div>
    <div class="smallColumn">Small</div>
    <div class="smallColumn">Small</div>
</div>
.container {
display: flex;
flex-flow: wrap;
height: 60px;
}
.smallColumn {
flex-basis: 300px;
align-self: flex-start;
background-color: yellow;
}

.largeColumn {
flex-basis: 1px;
align-self: flex-start;
background-color: orange;
margin-top: 30px;
}

.contentDiv
{
background-color: orange;
position: absolute;
left:10px;
flex-basis: 600px;
}

浮动元素忽略更大的元素

6 个答案: