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;
}
它看起来像这样:
正如您所看到的，每个 block 的所有内容长度不相等并且不居中，因为我希望 block (列)响应宽度。我如何将它们平均分为具有全宽度的column-1、具有1/2宽度的column-2、具有1/3宽度的column-3和具有1/4宽度的column-4？并水平居中。
最佳答案
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
关于html - 将div平分并居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32157089/