动态水平布局

Question

我在为新网站设置布局时遇到了一些麻烦 - 它无论如何都无法正常工作。希望有人可以帮助我！

我的目的是拥有居中的父元素（#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();

});

Answer 1

你可以这样做：

#project {
    width: 100%;
}

.project {
   width: 33%;
}

Answer 2

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

以下是一个简单示例：http://jsfiddle.net/4w0y4t2u/

现在，如果您希望它专门适合100％的宽度，只需将其设置为ul，并且他们的孩子将自行调整...

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

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