Question

只想问一些关于这个例子的问题：

enter image description here

这些天进行3列布局的最佳方法是什么？当然有桌子，现在有div等等。最新最好的方法是什么？如果完全取决于我，我会有一个容器div，包含3个其他容器。设置为width: 33%;和display: inline;

另外，如何获得这些垂直分隔线？据我所知，你再次在表格中使用它，只显示某些边界，你可以通过它获得垂直规则效果。

但这些天来获得这种效果的最佳方式是什么？在工具箱中使用html5和css3 ..

提前致谢！

Answer 1

试试这个

<强> HTML

<div class="outer">
<div class="wrap">
<div class="sub">Lorem Ipsum</div>
<div class="sub">Lorem Ipsum </div>
<div class="sub">Lorem Ipsum </div>
</div>
</div>

<强> CSS

.outer {
    background: #734e91;
    padding: 12px;
}
.wrap {
    margin: 0 auto;
}
.sub {
    padding: 12px;
    width: 32%;
    height: 150px;
    background: #734e91;
    display: table-cell;
    border-right: solid #a175c4 1px;  
}
.sub:last-child {
    border: 0px;
}

DEMO UPDATED

Answer 2

jsFiddle演示：http://jsfiddle.net/yDXLp/3/

<style>
    footer {
        background-color: #eee;
        margin: 10px auto;

    }
    footer h2 {
        font-size: 1.5em;
        font-weight: bold;
    }
    footer > div,
    footer > .divider {
        display: inline-block;
        vertical-align: middle;   
    }
    footer > div {
        padding: 1%;
        text-align: center;
        width:30%;
    }

    footer > .divider {
        font-style: normal;
        height: 240px;
        border: 1px solid #888;
        -webkit-box-shadow: 1px 2px 1px #ccc;
        box-shadow: 1px 2px 1px #ccc;
    }
</style>

<footer>
    <div>
        <h2>Our Client</h2>
        <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
        <button>Read more</button>
    </div>
    <i class="divider"></i>

    <div>
        <h2>Pay Rates</h2>
        <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum  </p>
        <button>Read more</button>
    </div>
    <i class="divider"></i>
    <div>
        <h2>About US</h2>
        <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
        <button>Read more</button>
    </div>
</footer>

Answer 3

Checkout Twitter Bootstrap（http://twitter.github.com/bootstrap/），Gumby Framework（http://gumbyframework.com/）

这些框架可能为您提供水平条的现成功能。否则使用边框。将除右边的所有边框设置为透明颜色

Answer 4

css3做列的方法是使用"column-*" family of properties

现在所有主流浏览器都支持它们，它们应该没有任何问题。

我个人在home site中使用这些样式，它们提供了相当灵活（可能有一些小缺点）的布局格式。

Answer 5

最好的方法取决于你想要达到的目标。列应该如何调整窗口大小等。

如果我在图片中做了类似的事情，我可能会使用固定的宽度，这样我就可以控制文本的线宽。

通过使用内联块，您可以在较小的屏幕（如手机）上实现折叠并放在一起的列

首先尝试计算出所需的行为。

编辑：哎呀，我误读并混淆了水平与垂直;-)我认为其他答案解释了他的足够。

如果我错了，请纠正我，但我认为css3列属性适用于同一文本正文的多个列。

Answer 6

我建议使用box-sizing: border-box;（标准css框模型的替代方法）。

box-sizing: border-box;做了什么？如果您定义div的宽度（例如33％）并添加边框和填充，则更长时间会影响div的计算。它仍然是父母的33％（33％ - （边界+填充））。

标准框模型将它们添加到33％的计算中（在我们的例子中为33％+边框+填充）。

HTML标记：

<div class="footer">
    <div class="footer-item item1"></div>
    <div class="footer-item item2"></div>
    <div class="footer-item item3"></div>
</div>

<强> CSS：

.footer {
    box-sizing: border-box; /* will need vendor prefixes for webkit and mozilla */
}

.footer-item {
    width: 33%;
    float: left;
}

.footer-item + .footer-item {
    border-left: 1px solid black;
}

页脚布局和垂直分隔线

6 个答案: