我想将放置在包装DIV中的3个DIV放在中间。要点是那些DIV将单独伸展它们的WIDTH，以便它们可以一起匹配100％的包装宽度。
< div class =wrapper>
< div> Content1< / div>
< div> Content2< / div>
< div> Content3< / div>
< / div>
有人知道这是怎么完成的？您可以使用CSS表格布局，浏览器支持非常棒 - IE8 +
>。
snippet-code>
.wrapper {display：table;边界崩溃：崩溃; / * table-layout：fixed; * / width：100％;}。wrapper> div {display：table-cell; border：1px solid red;} @ media（max-width：480px）{.wrapper> div {display：block; }
< div class =wrapper> < DIV>内容1< / DIV> < DIV>内容2< / DIV> < div> Content3< / div>< / div>
$ b 注意 .wrapper {table-layout：fixed; } 用于宽度相等的单元格。
I want to center 3 DIVs placed in wrapper DIV. Point is that those DIVs will stretch out their WIDTH individually so they can together match the width of wrapper which is 100%.
<div class="wrapper">
<div>Content1</div>
<div>Content2</div>
<div>Content3</div>
</div>
Anybody know how this is done? Thank you for your help.
You could use CSS table layout, browser support is great - IE8+.
.wrapper {
display: table;
border-collapse: collapse;
/* table-layout: fixed; */
width: 100%;
}
.wrapper > div {
display: table-cell;
border: 1px solid red;
}
@media (max-width: 480px) {
.wrapper > div {
display: block;
}
}
<div class="wrapper">
<div>Content1</div>
<div>Content2</div>
<div>Content3</div>
</div>
Note .wrapper { table-layout: fixed; } is for equal width cells.
这篇关于将多个DIV延伸至父级的100％宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
