Question

想象一个网页顶部有一个全宽内容bin，但是底部分为多个列和行，每个bin（一列和一行）都有自己的内容。内容量可能会有所不同，因此这些容器的高度可能不同。

我想为bin创建一个css类型，可能是这样的：

div.bin
{
float:left;
padding:1.0em;
box-sizing: border-box;
width: 25%; 
}

在一个较大的<div class="bin"> CONTENTS </div>容器内，行中会有可变数量的<div style="width:100%">元素。

目标是，如果有两个以上的bin元素，前四个将显示在一行中，接下来的四个将显示在另一行中，等等，不要求bin的数量为多个四个。

我遇到的问题是第二行没有整齐地显示在前四个最长的垂直位置。相反，如果（比方说）第二个是超长的，第五个将会回绕，向左浮动，直到它碰到bin＃2的下行部分并在第三列显示，从而搞砸了整个演示文稿。

我可以通过在包装DIV中一次放置四个来解决这个问题，但这会切入我想要的灵活性。

理想情况下，我希望能够通过在视口变小时将bin的宽度属性重新定义为33％，50％和100％来使整个事物响应。当然，为了使这项工作，bin不能放入子集容器DIV中。

有什么想法吗？

问题的图片

当第五个包裹它时，它会突然进入第一个的前缘，然后是4个之前的长度超过4个。

正如您在6到9中看到的那样，在正确确定上边缘后，它们显示正常。

所以，问题是，如何强制框5显示在最长的方框1到4的底边...

注意：问题不在于如何让box 5专门正确包装。这是如何让任何盒子正确包装，即使你不知道哪一个要包装（例如，如果箱子的宽度从25％变为33.33％，或其他东西）。

Answer 1

注意：我没有看到图片，所以这有点猜测你想要什么，也消除了空格。

使用砌体类（您可以根据需要命名该类。）结果将是使用文本。

<强> HTML

<div class="masonry">
   <div class="item"><img src="example.com/1.jpg"></div>
   <div class="item"><img src="example.com/2.jpg"></div>
   <div class="item"><img src="example.com/3.jpg"></div>
   <div class="item"><img src="example.com/4.jpg"></div>
   <div class="item"><img src="example.com/5.jpg"></div>
   <div class="item"><img src="example.com/6.jpg"></div>
   <div class="item"><img src="example.com/7.jpg"></div>
   <div class="item"><img src="example.com/8.jpg"></div>
</div>

<强> CSS

.masonry { /* Masonry container */
    column-count: 4;
    column-gap: 1em;
}

.item { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

自适应CSS

.masonry {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
}

.item {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}

@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}

@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}

JSfiddle DEMO

Answer 2

或者，您可以使用flex-box：https://jsfiddle.net/2t1bzjk9/

＆＃13;

#container {
  background: black;
  display: flex;
  flex-wrap: wrap;
}
div.bin {
flex: 1 0 25%;
padding:1.0em;
box-sizing: border-box;
width: 25%; 
background: white;
  border: 1px solid red;
}

＆＃13;

<div id="container">
  <div class="bin">
    <p>
    some content
    </p>
  </div>
    <div class="bin">
    <p>
    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content   
    </p>
  </div>
  <div class="bin">
    <p>
    some content
    </p>
  </div>
  <div class="bin">
    <p>
    some content
    </p>
  </div>
 <div class="bin">
    <p>
    some content
    </p>
  </div> <div class="bin">
    <p>
    some content
    </p>
  </div> <div class="bin">
    <p>
    some content
    </p>
  </div> <div class="bin">
    <p>
    some content
    </p>
  </div> <div class="bin">
    <p>
    some content
    </p>
  </div> <div class="bin">
    <p>
    some content
    </p>
  </div>
</div>

＆＃13;

如何跨多行顶部对齐多个文本块

2 个答案: