Html 将div等分并居中_Html_Css_Responsive Design

Html 将div等分并居中

html css responsive-design

Html 将div等分并居中,html,css,responsive-design,Html,Css,Responsive Design,html代码： <body> <div id="grid-main_content"> <div class="block "> <div class="column column-1"> <p>Esse ingeniis instituendarum...</p>

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>

看起来是这样的：

正如您所看到的，每个块的所有内容在长度上都不相等，并且没有居中，因为我希望块（列）响应于宽度。我怎样才能将它们平均分为第1列具有全宽、第2列具有1/2的宽度、第3列具有1/3的宽度和第4列具有1/4的宽度？水平居中。

这里有一把小提琴，可以帮助您设置相等的宽度。它使用边框框，因此当您使用一半（50%）、三分之一（33.3%）等时，不会让您的框撞到下一行。填充物占用框内的空间，使它们适合并100%伸展：

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

}

css:

js:

查找

flexbox

可以做到这一点

仅此而已：

.block {
  display: flex;
}

.column {
  flex:1;
}

支持IE10及以上

.block{
边框：1px纯黑；
保证金：2倍；
显示器：flex；
}
.栏目{
填充物：5px；
保证金：5px；
弹性：1；
}
.第1栏{
背景：浅蓝色；
}
.第2栏{
背景：浅绿色；
}
.第3栏{
背景：黄色；
}
.第4栏{
背景：红色；
}


埃塞英格尼学院
他是一个非富饶的乌兰科人
如果你是一名上诉法庭的仲裁人
蓝鲸是负鼠
Multos QUAMQUAMQUAM应至少安装一个sed consequat
伊乌斯莫德·伊卢姆·曼达雷姆斯上诉法院
双仲裁者圣多洛
经验是教条，但违反了自己的原则，不应被熟悉
丘比特和精英上诉
欧盟峰会

改用？您尝试过什么？正如simon所说，表格可以做到这一点，flexbox也可以（更轻松地）、各种边距/填充黑客和其他几种混合物。只需谷歌“等克隆高度”，就有成吨的内容。除此之外，请尝试将代码放入代码段中。它不会再现所描述的结果。@simon是的，这样就可以了！

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;
}

$(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);

        }

.block {
  display: flex;
}

.column {
  flex:1;
}