Question

html代码：

<body>    
    <div id="grid-main_content">
        <div class="block ">
            <div class="column column-1">
                <p>Esse ingeniis instituendarum...</p>
            </div>
        </div>

        <div class="block">
            <div class="column column-2">
                <p>Quis voluptate o comprehenderit non fugiat ullamco..</p>
            </div>
            <div class="column column-2">
                <p>Irure an arbitror de appellat fugiat offendit,..</p>
            </div>
            <span class="clear-both"></span>
        </div>

        <div class="block">
            <div class="column column-3">
                <p>Cernantur est possumus,..</p>
            </div>
            <div class="column column-3">
                <p>Multos quamquam deserunt ea minim sed consequat,..</p>
            </div>
            <div class="column column-3">
                <p>Eiusmod illum mandaremus quo appellat...</p>
            </div>
            <span class="clear-both"></span>
        </div>

        <div class="block">
            <div class="column column-4">
                <p>Duis arbitror sed dolor sint...</p>
            </div>
            <div class="column column-4">
                <p>Eram expetendis doctrina ut offendit ipsum et deserunt familiaritatem,..</p>
            </div>
            <div class="column column-4">
                <p>Cupidatat aut elit appellat...</p>
            </div>
            <div class="column column-4">
                <p>Eu irure summis...</p>
            </div>
            <span class="clear-both"></span>
        </div>
    </div>
</body>

的CSS：

.block {
    border: 1px solid black;
    margin: 2px;
}

.column {
    padding: 5px;
    margin: 5px;
}

.column-1 {
    background: lightblue;
    width: 100%;
}

.column-2 {
    background: lightgreen;
    width: 48%;
    float: left;
}

.column-3 {
    background: yellow;
    width: 32%;
    float: left;
}

.column-4 {
    background: red;
    width: 23%;
    float: left;
}

它看起来像这样：

如您所见，每个块的所有内容长度不相等且不居中，因为我希望块（列）响应宽度。如何将它们平均分为具有全宽度的第1列，具有宽度的1/2的第2列，具有1/3宽度的第3列和具有1/4宽度的第4列的第4列？并且水平居中。

Answer 1

的CSS：

body, html{
    margin:0;
    padding:2px;
}
*{
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
.block {
    border: 1px solid black;
    padding: 2px;
    float:left;
    width:100%;
}

.column {
    padding: 5px;
}

.column-1 {
    background: lightblue;
    width: 100%;
}

.column-2 {
    background: lightgreen;
    width: 50%;
    float: left;
}

.column-3 {
    background: yellow;
    width: 33.333%;
    float: left;
}

.column-4 {
    background: red;
    width: 25%;
    float: left;
}

JS：

$(function(){
            equalHeight();
        });
        $(window).resize(function(){
            equalHeight();
        });
        function equalHeight(){
            var maxHeight = 0;
            $(".column-4").each(function(){
               if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
            });
            $(".column-4").height(maxHeight);

            $(".column-3").each(function(){
               if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
            });
            $(".column-3").height(maxHeight);

            $(".column-2").each(function(){
               if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
            });
            $(".column-2").height(maxHeight);

        }

找到 fiddle dmeo

Answer 2

flexbox可以做到这一点。

只有这个：

.block {
  display: flex;
}

.column {
  flex:1;
}

支持是IE10及以上。

.block {
    border: 1px solid black;
    margin: 2px;
  display: flex;
}

.column {
    padding: 5px;
    margin: 5px;
  flex:1;
}

.column-1 {
    background: lightblue;
}

.column-2 {
    background: lightgreen;
}

.column-3 {
    background: yellow;
}

.column-4 {
    background: red;
}

<body>    
    <div id="grid-main_content">
        <div class="block ">
            <div class="column column-1">
                <p>Esse ingeniis instituendarum...</p>
            </div>
        </div>

        <div class="block">
            <div class="column column-2">
                <p>Quis voluptate o comprehenderit non fugiat ullamco..</p>
            </div>
            <div class="column column-2">
                <p>Irure an arbitror de appellat fugiat offendit,..</p>
            </div>
    
        </div>

        <div class="block">
            <div class="column column-3">
                <p>Cernantur est possumus,..</p>
            </div>
            <div class="column column-3">
                <p>Multos quamquam deserunt ea minim sed consequat,..</p>
            </div>
            <div class="column column-3">
                <p>Eiusmod illum mandaremus quo appellat...</p>
            </div>
        </div>

        <div class="block">
            <div class="column column-4">
                <p>Duis arbitror sed dolor sint...</p>
            </div>
            <div class="column column-4">
                <p>Eram expetendis doctrina ut offendit ipsum et deserunt familiaritatem,..</p>
            </div>
            <div class="column column-4">
                <p>Cupidatat aut elit appellat...</p>
            </div>
            <div class="column column-4">
                <p>Eu irure summis...</p>
            </div>

        </div>
    </div>
</body>

Answer 3

这是一个小提琴http://jsfiddle.net/gx9hfeLq/1/，它可以帮助您设置相同的宽度。它使用边框，因此当您使用正好一半（50％），第三（33.3％）等时，您不会让您的盒子碰到下一行。填充占用空间里面盒子使它们适合并伸展100％：

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}

同样划分div并使它们居中

3 个答案: