在列中定位div的堆栈

Question

我有三个div包含在一个，制作一个盒子。我有五个盒子。 我会在CSS或jQuery中找到一个解决方案来显示它们在3列而不是只有一列。这没有从当前结构中挑选任何代码行（但是我可以添加一些）。 这是JSFiddle：

<div class = "box">
    <div class = "boxTitle"> My title</div>
    <div class = "boxContent"> My content</div>
    <div class= "botBottom"> &nbsp;</div>
</div>

<div class = "box">
    <div class = "boxTitle"> My second title</div>
    <div class = "boxContent"> My second content</div>
    <div class= "botBottom"> &nbsp;</div>
</div>

http://jsfiddle.net/Fayastone/C8XGU/3/

有没有人有想法？

非常感谢您阅读我，

雨果。

Answer 1

有三种常规方法可以做到这一点。

1 - Floats

Floats适用于所有主流浏览器。如果您不熟悉CSS，那么习惯它们可能会有些棘手（阅读clearing floats和check out SO for info too!）。

.box{
    border : 2px inset grey;
    border-radius : 6px;
    /* new stuff */
    float : left; 
    width : 30%;
    margin : 0 1.5%;

    box-sizing : border-box; /* for box layout */
}

<强> Check out the updated fiddle using floated boxes!

---

2 - 使用display:inline-block

另一种（可以说是更好的）方法是更改​​div的display属性。 inline-block是一个很好的值，因为它不会强制框拉伸整个宽度，但它仍然允许在div的框中非常灵活地使用CSS。

问题是Internet Explorer 7或更低版​​本中未正确支持display: inline-block。

.box{
    border : 2px inset grey;
    border-radius : 6px;

    /* new stuff */
    display : inline-block;

    width : 30%;             /* for three columns */
    margin : 0 1.5%;         /* for box layout */
    box-sizing : border-box; /* for box layout */
}

<强> Check out my fiddle using display: inline-block!

---

3 - 模仿<table>

这个更复杂，但它可以让您轻松确保每列的高度相同。

您需要将列包装在另一个元素中作为列容器，然后您只需进行一些CSS更改。您正在使用CSS强制您的div表现得像<table>：

<强> HTML

<div class="wrapper"><!-- new table wrapper -->
    <div class = "box">
        <div class = "boxTitle"> My title</div>
        <div class = "boxContent"> My content</div>
        <div class= "botBottom"> &nbsp;</div>
    </div>

    <div class = "box">
        <div class = "boxTitle"> My second title</div>
        <div class = "boxContent"> My second content</div>
        <div class= "botBottom"> &nbsp;</div>
    </div>

    <div class = "box">
        <div class = "boxTitle"> My second title</div>
        <div class = "boxContent"> My second content</div>
        <div class= "botBottom"> &nbsp;</div>
    </div>
</div>

<强> CSS

.wrapper {
    display : table;
    width : 100%; /* ensure table takes full width */
}

.box{
    border : 2px inset grey;
    border-radius : 6px;

    width : 33.3%;        /* even out the width */
    display : table-cell; /* This allows them to be side by side */
}

<强> Check out the display: table-cell layout on jsFiddle!

---

Answer 2

响应式解决方案..

您可以使用column-count制作响应式布局，使用<div class='columns'>包装然后使用下面的CSS，尝试调整窗口大小以查看布局的动态更新：

Demo Fiddle

.box {
    border : 2px inset grey;
    border-radius : 6px;
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom:30px;
}
.boxTitle {
    color : #FF6600;
    border : 2px inset grey;
}
.columns {
    -webkit-column-width: 20em;
    -webkit-column-gap: 2em;
    -webkit-column-rule: 1px solid #eee;
    -webkit-column-count: 3;
    -moz-column-width: 20em;
    -moz-column-gap: 2em;
    -moz-column-rule: 1px solid #eee;
    -moz-column-count: 3;
    -ms-column-width: 20em;
    -ms-column-gap: 3em;
    -ms-column-rule: 1px solid #eee;
    -ms-column-count: 3;
    column-width: 20em;
    column-gap: 2em;
    column-rule: 1px solid #eee;
    column-count: 3;
}

Answer 3

以下是对小提琴的更新： http://jsfiddle.net/C8XGU/12/

.box{
    border : 2px inset grey;
    border-radius : 6px;
    width:33%;
    display:inline-block;
    margin:-2px;
}

框类的css已更新。

Answer 4

您希望这些框位于不同的列中吗？喜欢这个？

.box{
    border : 2px inset grey;
    border-radius : 6px;
    width:33%;
    float:left;
}

JSFiddle

Answer 5

喜欢这个？ display:inline-block

http://jsfiddle.net/C8XGU/10/