动态水平布局答案

【问题标题】：Dynamic horizontal layout动态水平布局
【发布时间】：2014-10-14 08:30:05
【问题描述】：

我在为我的新网站设置布局时遇到了一些问题 - 它无论如何都不起作用。希望有人可以帮助我！

我的意图是让父元素 (#projects) 居中，其宽度由其所有子元素 (.project) 的总和计算得出。

HTML

<ul id="projects">
   <li class="project"></li>
   <li class="project"></li>
   <li class="project"></li>
   <li class="project"></li>
   <li class="project"></li>
   <li class="clear"></li>
</ul>

CSS

* {
        margin:0; padding:0; list-style:none;
        text-decoration:none; border:0; outline:0; }

body {
        background:#f5f5f3;
        font-family:"Arial", sans-serif;
        font-size:12px;
        line-height:22px;
        letter-spacing:1.5px;
        font-weight:300;
        color:#fefefe; }

.clear {
        clear:both; }

#projects {
        margin:auto; }

#projects .project {
        height:100vh;
        float:left; }

#projects .project:nth-child(1) {
        background:#111; }

#projects .project:nth-child(2) {
        background:#333; }

#projects .project:nth-child(3) {
        background:#555; }

#projects .project:nth-child(4) {
        background:#777; }

#projects .project:nth-child(5) {
        background:#999; }

jQuery

$(document).ready(function() {

    // .project Layout
    $(window).on( "resize", function () {
        $(".project").width( $(window).width() / 3 );
    }).resize();

    // #projects Layout
    $(window).on("resize", function () {
    var width = 0;
    $('.project').each(function() {
        width += $(this).outerWidth( true );
    });
    $('#projects').css('width', width);
    }).resize();

});

【问题讨论】：

看看 Bootstrap 网格布局。 getbootstrap.com/examples/grid
您的 // #projects 调整窗口大小的布局函数将覆盖您之前的定义。
我已经尝试过 Bootstrap 但我没有得到它 - 似乎对我的需求来说太重了。无论如何，我使用 Bootstrap 时没有工作。
您的 // #projects 调整窗口大小的布局函数将覆盖您之前的定义。
我的目标是将所有子元素 (.project) 相加以获得父元素 (#projects) 的总宽度。怎么了？

标签： jquery html css layout

【解决方案1】：

你可以这样做：

#project {
    width: 100%;
}

.project {
   width: 33%;
}

【讨论】：

已经尝试过了，但它不起作用，因为#project 的宽度超过 100%。

【解决方案2】：

这是一个表格样式的布局。在这种情况下，您可以将ul 设置为display: table，将li 设置为display: table-cell，而不为ul 指定宽度。它总是会随着孩子的大小而增加。

这是一个简单的例子：http://jsfiddle.net/4w0y4t2u/

现在，如果你想让它专门适合100%的宽度，只需将它设置为ul，li的孩子会自己调整......

这是另一个全宽示例：http://jsfiddle.net/4w0y4t2u/1/

提示：关于ul，记住它有浏览器应用的默认边距和内边距，所以不要忘记添加margin: 0和padding: 0

【讨论】：