Question

对我来说，预期的行为是，只要容器的宽度不超过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>

导致问题的原因是什么？可能是一种解决方法？

Answer 1

我想现在你的理由很清楚，所以我只是建议你解决这个问题。使用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>

Working : Fiddle

更新了解决方案：

找到解决方案

返回表格可以通过将table-layout:fixed;提供给容器来实现。

Working Demo

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

Answer 2

感谢Aziz，现在我知道max-width shouldn't be used for table cells为

在CSS 2.1中，＆＃39; min-width＆＃39;和＆＃39; max-width＆＃39;表，内联表，表格单元格，表格列和列组未定义。

等待解决方法...

max-width不适用于table-cell

2 个答案: