高级CSS布局问题

我想创建一个标题，边框（左，右，底部）以及内容的对话框。电流源代码：高级CSS布局问题

<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>

产生的

alt text http://img19.imageshack.us/img19/7898/46812649.png

什么发生在左和右边界以及为何大小超过在顶父母指定的宽度（152px）的输出？

来源

2010-03-15 Tower

如果您打算使用表格，请使用表格。设置块元素的显示以模拟各种表格元素充其量是有问题的，并且是非常不可预知的跨浏览器。

来源

2010-03-15 12:44:25 Robusto

您使用的内嵌规则过多，请尝试使用CSS选择器，类和ID将它们分隔为div，并适当地使用表格。

一些规则正在取消其他人，这就是为什么你没有看到边界。

来源

2010-03-15 12:46:36 OverLex

对不起，但您的HTML代码是一个令人联想到90年代初的标签汤的可怕混乱。

由于你的确切问题，宽度更大，因为你的规则white-space: nowrap拉伸表。这可能是删除边界 - 这些“单元格”中没有内容，因此它们折叠为零宽度。

像Robusto说的，如果你想要一张桌子，就用一张桌子。如果你想要一个类似对话框的盒子，你肯定不需要嵌套div标签。只要有你的外在之一，并使用边框的规则设定的边界：

<div style="border:4px solid #000; border-top:0; background:#0ff; width:152px; height:112px;"> 
    <h2 style="background:#f00;">top</h2> 
    cwe cwe cwe cwe... 
</div>

来源

2010-03-15 12:55:31 DisgruntledGoat

你不必使用所有这些div s到开始。您可以大幅简化您的HTML：

<div> 
    <h1>top</h1> 
    <div> 
    <p>cwe cwe cwe</p> 
    <p>cwe cwe cwe</p> 
    </div> 
</div>

并仍然可以轻松应用所需的所有样式。无需为每个边界创建一个div。这就是CSS属性border-left,border-right,border-bottom和border-top是否有用（和古代浏览器支持这些，display: table不同）。

来源

2010-03-15 12:58:39

滚动不是由大小造成的，它是由你迫使Scroll值溢出引起的。根据我的经验，将其设置为滚动会始终显示滚动条 - 尽管处于禁用状态。尝试将溢出设置为自动

<div style="overflow: auto; white-space: nowrap">

来源

2010-03-15 13:04:18 Mauro

高级CSS布局问题

回答

相关问题