对我来说,预期的行为是,只要其容器的宽度不超过500像素,中间单元就会水平填充整个空间。但是,缩放页面的大小无关紧要,中间的单元格始终会填充100%,而忽略max-width属性,并且巧克力永远不会显示:(
div.container {
width: 100%;
display: table;
}
div.container > * {
display: table-cell;
}
div.middle {
width: 100%; max-width: 500px;
background-color: black;
}
div.side {
width: auto;
background-color: chocolate;
}
<div class="container">
<div class="side"></div>
<div class="middle">.</div>
<div class="side"></div>
</div>
是什么导致了问题,什么可能是解决方法?
我想原因现在已经很清楚了,所以我将为您建议一个解决方法。通过使用display:block/inline-block;
代替display:table/table-cell;
。
所以解决方案是:
div.container {
width: 100%;
display: block; /* Changed from display:table; */
}
div.container > * {
display: inline-block; /* Changed from display:table-cell; */
float:left; /* Added floating to avoid space between elements */
}
div.middle {
width: 100%;
max-width: 500px;
background-color: black;
}
div.side {
width: auto;
background-color: chocolate;
}
<div class="container">
<div class="side">Left</div>
<div class="middle">.</div>
<div class="side">Right</div>
</div>
更新的解决方案:
找到了解决方案
让我们再回到表将给予合作table-layout:fixed;
,以容器。
的HTML
<div class="container">
<div class="side">Left</div>
<div class="middle">.</div>
<div class="side">Right</div>
</div>
的CSS
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
.container {
display:table;
width:100%;
height:10px;
table-layout:fixed;
}
.side, .middle {
display:table-cell;
text-align:center;
vertical-align:middle;
}
.middle {
width:500px;
background:black;
}
.side {
width : calc(50% - 500px);
overflow:hidden;
background:chocolate;
}
@media (max-width: 500px) {
.side
{
display:none;
}
.middle
{
width:100%;
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句