Question

我有四个块元素（类型为aside，它们是Wordpress侧边栏中的小部件）。在狭窄的容器中（例如在移动电话上），它们一个堆叠在另一个之上：

one
two
three
four

在一个广泛的容器中（在桌面上查看）我希望它们分为两列：

+-------+------+
| two   | one  |
|       +------+
|       | four |
+-------+      |
| three |      |
+-------+      |
        |      |
        +------+

请注意订单！

所有元素都是不相等的，不同的高度。所有元素都具有相同的固定宽度，这是其父元素的一半。

Floats留下了一个难看的差距：

+-------+------+
| two   | one  |
|       +------+
|       |         <= I do not want this gap!
+-------+------+
| three | four |
+-------+      |
        |      |
        |      |
        |      |
        +------+

如何使这项工作在元素之间没有间隙？

很抱歉没有提供正常工作的代码示例，但接下来几天我在手机上打字并且输入很麻烦。

Answer 1

你可以用保证金来做这件事，这很奇怪。这是一个跨浏览器的解决方案，如果您不需要支持IE8，您可以使用nth-child()而不是相邻的兄弟选择器。要使用不相等的高度，您需要在第二行的开头清除浮动：

<强> HTML

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
</ul>

<强> CSS

ul {
  width: 80%;
  outline: 1px solid #f0f;
  margin: 0 auto;
  padding: 0;
}

li {
  display: block;
  float: left;
  width: 50%;
}

li:first-child {
  margin-left: 50%;
  height: 200px;
  background-color: blue;
}

li:first-child + li {
  background-color: yellow;
  margin-left: -100%;
  height: 50px
}

li:first-child + li + li {
  clear: left;
  height: 100px;
  background-color: red;
}

li:first-child + li + li + li {
  height: 30px;
  background-color: green;
}

示例

http://codepen.io/goshdarnheck/pen/rVeXZy

Answer 2

您可以使用nth-child（n + n）并清除。

ul {
  width: 200px;
  box-shadow:inset 0 0 0 3px green;
  padding:0;
  float:left;
  margin:0.5em;
}

li {
  display: block;
  float: left;
  width: 50%;
  box-shadow: 0 0 0 2px turquoise;
}
li:first-of-type , 
li:nth-child(4n+1)/* if more than 4 li to keep going*/{
  float:right
}
li:nth-child(2n+1) {
  clear:both;
}

<ul>
  <li style="height:30px;">one</li>
  <li style="height:90px;">two</li>
  <li style="height:50px;">three</li>
  <li style="height:40px;">four</li>
</ul>

<ul>
  <li style="height:30px;">one</li>
  <li style="height:90px;">two</li>
  <li style="height:50px;">three</li>
  <li style="height:40px;">four</li>
  <li style="height:30px;">five</li>
  <li style="height:90px;">six</li>
  <li style="height:50px;">seven</li>
  <li style="height:40px;">eight</li>
</ul>

Answer 3

您可以利用CSS的flex和order属性（但它仅适用于CSS3）。

您可以按自然顺序定义元素。但是，从给定的minimum screen width开始，您声明必须按照与标记代码中的顺序不同的顺序布置这些框。

<div id="group1" class="group">
  <div id="one" class="box">1</div>
  <div id="two" class="box">2</div>
</div>
<div id="group2" class="group">
  <div id="three" class="box">3</div>
  <div id="four" class="box">4</div>
</div>

/*
 Default style: boxes get full screen width.
*/
.group {
  display: block;
}

.box {
  width: 100%;
}

/*
 Big screens: boxes in columns and altered order */
@media all and (min-width: 640px) {
  .group {
    display:flex;
  }

  #two {
    order: 1;
  }

  #one {
    order: 2;
  }
}

示例： http://codepen.io/abl/pen/rVeXGM

Answer 4

如果您愿意在第2和第3个内容块周围添加包装块元素，则可以执行此操作。

在下面的代码中，我添加了包装器.left-col。对于大页面，（我添加了类.wide以触发效果，但您可以使用媒体查询），为width: 50%设置float: left和.left-col，并添加一些如果你想要一些空格，请向右填充。为了简化数学运算，还要添加box-sizing: border-box。

这样做是将两个块.col2和`.col3'保持在左边的一列中，具有正常的顶部/底部边距（没有大的间隙）。

对于.col1，将宽度设置为50％和float: right，因此此元素将自己定位到.left-col块的右侧，从而开始第二列。

最后，对于.col4，此块实际上没有浮动，只是常规内容流的一部分。添加overflow: auto以防止文本环绕左浮动块，然后margin-top: 10px以保留相对于浮动.col1块底边的边距。

我在Win7 PC上对最新版本的Firefox，Chrome和IE进行了测试，一切似乎都运行正常。

如果删除.wide课程，您将看到获得较小屏幕所需的垂直布局。

.panel {
    border: 1px dotted blue;
    overflow: auto;
    padding: 0 10px;
}
div[class^="col"] {
    background-color: beige;
    margin: 10px 0;
}
.wide .left-col {
    width: 50%;
    float: left;
    padding-right: 10px;
    box-sizing: border-box;
}
.wide .col1 {
    width: 50%;
    float: right;
    background-color: lightgreen;
}
.wide .col4 {
    width: 50%;
    margin-top: 10px;
    background-color: lightblue;
    overflow: auto;
}

<div class="panel wide">
    <div class="col1">1 Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus.</div>
    <div class="left-col">
        <div class="col2">2 Vestibulum arcu lectus, venenatis non aliquam a, imperdiet nec neque. Sed facilisis, est eu sollicitudin ullamcorper, urna erat tincidunt lectus, laoreet pulvinar velit turpis sit amet ligula. Cras iaculis elit et augue aliquet ullamcorper. Sed metus sem, dictum mollis adipiscing lacinia, placerat at sapien. Mauris leo libero, consequat vel ultrices at, adipiscing imperdiet justo. Vestibulum vestibulum gravida nunc vel varius. Cras id velit venenatis dui ultrices vestibulum. Phasellus dapibus rutrum nulla, at malesuada elit pellentesque at. Vestibulum sit amet elit sapien.</div>
        <div class="col3">3 Morbi consequat, purus nec suscipit luctus, ipsum felis pulvinar nulla, a pulvinar nunc nibh sed nulla. Donec ac pellentesque lacus. Nullam magna velit, pellentesque ut sodales sit amet, tristique id elit.</div>
    </div>
    <div class="col4">4 Mauris erat tellus, dapibus sit amet congue eu, euismod at eros. Ut quis tincidunt ante. Aenean rhoncus lacinia odio, et sodales massa accumsan eu. Pellentesque bibendum volutpat varius. Proin mauris massa, sollicitudin eget elementum luctus, facilisis a lectus. Sed eu lorem ac arcu cursus mollis vitae eget risus. Integer quis quam sed magna tristique consequat tristique eu sem. Duis in eros nec ligula varius placerat. Nam commodo tellus vel lorem aliquet sed scelerisque magna porta. Donec vulputate interdum mauris ac euismod. Donec facilisis lectus nec tellus sollicitudin lobortis. Nulla nulla lorem, dapibus vitae posuere eu, volutpat eu tortor. In sollicitudin ante quis augue tempus tristique.</div>
</div>

列的浮点数或元素的左右 - 左 - 右分布

如何使这项工作在元素之间没有间隙？

4 个答案: