html - 页脚布局和垂直分隔线

Question

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

如今，执行此 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;
}

演示更新

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

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

做什么box-sizing: border-box;？如果您定义一个 div 的宽度（例如 33%）并添加边框和填充，它会更长地影响您的 div 的计算。它仍然是父级的 33%，具有 (33% - (borders + paddings))。

标准盒模型将它们添加到计算的 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;
}

Answer 4

查看 Twitter Bootstrap（http://twitter.github.com/bootstrap/），Gumby 框架（http://gumbyframework.com/）

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

Answer 5

做列的 css3 方式是使用“column-*”系列属性

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

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

Answer 6

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

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

通过使用 inline-block，您可以在较小的屏幕（如手机）上实现折叠并放在彼此下方的列

首先尝试找出所需的行为。

编辑：哎呀，我误读了水平和垂直;-)我认为其他答案足以解释他的意思。

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