对我来说,预期的行为是,只要容器的宽度不超过500px,中间单元就会水平填充整个空间.但是,无论我缩放页面的大小,中间单元格总是填满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>
更新方案：
找到了解决方案
回到表格可以通过给表格布局：固定;到容器.
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%;
}
}
