我想创建一个带有标题、边框(左、右、下)以及内容的对话框。当前源代码:
<html>
<body>
<div style="background: #0ff; width: 152px; height: 112px; position: absolute; top: 24px; left: 128px; display: table">
<div style="display: table-row;">
<div style="background: #f00; width: 100%; display: table-cell;height: 24px;">top</div>
</div>
<div style="display: table-row;">
<div style="background: #0f0; width: 100%; display: table-cell;">
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell; width: 4px; height: 100%; background: #000;"></div>
<div style="display: table-cell;">
<div style="overflow: scroll; white-space: nowrap">
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
</div>
</div>
<div style="display: table-cell; width: 4px; height: 100%; background: #000;"></div>
</div>
</div>
</div>
</div>
<div style="display: table-row;">
<div style="background: #000; width: 100%; display: table-cell; height: 4px;"></div>
</div>
</div>
</body>
</html>
产生输出
左右边框怎么了，为什么尺寸超过top parent中指定的宽度(152px)？
最佳答案
如果您要使用表格，请使用表格。将 block 元素的显示设置为模仿各种表格元素充其量是有问题的，而且跨浏览器非常不可预测。
关于html - CSS 布局 - 为什么边框和大小会这样？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2447097/