Question

我希望以下浮动的div垂直排列：类“box1”的第4个div 应该从其上方的div的底部（在5px边距之后）开始，而不是在整个上排的最低div的底部，对于后面的div相同。我怎么能用css做到这一点。
（如果只有另一种方法可以用css实现这一点，浮动不是必须的）

fiddle

html：

<div id="conainer">
    <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing eli
    </div>
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna al
    </div>
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
    </div>
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicin
    </div>
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </div>
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ul
    </div>
</div>

的CSS：

#conainer {display:block;}
.box1 {width: 31%; display:inline-block; border: thin solid black; margin:5px; float:left;}

Answer 1

CSS本身可能非常难以设置像这样的规则。但是，如果您知道哪些框将在哪些框之间对齐，那么您可以设置如下列：

<div id="conainer">
    <div class="column">
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing eli
        </div>
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicin
        </div>
    </div>
    <div class="column">
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna al
        </div>
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        </div>
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </div>
        </div>
    <div class="column">
        <div class="box1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ul
        </div>
    </div>
</div>

然后，将CSS应用于每个列以向左浮动，而其中的框浮动到底部。

#conainer {
    display:block;
}
.column {
    width: 31%;
    display:inline-block;
    float:left;
}
.box1 {
    border: thin solid black; 
    margin:5px; 
    float: bottom;
}

Example fiddle

此外，根据您要实现的目标，相同的高度div可能有助于解决您的问题。 Example fiddle

浮动divs垂直排列

1 个答案: