通过css修复布局
通过css修复布局
提问于 2009-02-13 17:01:26
我在IE6中发现了一个布局错误，试图在我们的内容区域提供一些关于这个内容的线索，这样它就不会掉到导航菜单下面。很遗憾，虽然如果我可以重新设计整个页面，这可能比较容易修复，但我做不到.它是一个实时站点，托管了很多很多内容pages...and，它只在几个地方，比如IE6，在一些有点不寻常的情况下，circumstances...so冒着对内容持有者进行重大布局更改的风险是不合理的。
布局应该如下所示：
+-------+ +-------------------+
| Menu | | Content chunk 1 |
| | +-------------------+
| | +-------------------+
+-------+ | Content chunk 2 |
+-------------------+
Footer但是在IE 6中，它看起来像是：
+-------+
| Menu |
| |
| |
+-------+
+-------------------+
| Content chunk 1 |
+-------------------+
+-------------------+
| Content chunk 2 |
+-------------------+
Footer我一直在试图修复这个问题，并且正在研究一些建议的here引用，但是我希望css专家能够很容易地看到一些我不是的地方。
代码如下所示：
<!DOCTYPE html PUBLIC "-//W3C//Dtd Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<body>
<div style="margin: 11px auto; width: 775px">
<!-- Menu -->
<div style="width:160px; float:left; clear:left; border:#999 1px dashed;">
Menu Item 1<br />
Menu Item 2<br />
</div>
<!-- Main content area -->
<div style="position: relative; width: 565px; float: left; margin-right: -222px">
<!-- I'm able to start modifying here. -->
<!-- Content chunk 1 -->
<table border="1">
<tr>
<td>This is data chunk 1 withALongChunkThatDoesn'tDivideWell</td>
<td>This is data chunk 2 withALongChunkThatDoesn'tDivideWell</td>
<td>This is data chunk 3 withALongChunkThatDoesn'tDivideWell</td>
<td>This is data chunk 4 withALongChunkThatDoesn'tDivideWell</td>
<td>This is data chunk 5 withALongChunkThatDoesn'tDivideWell</td>
</tr>
</table>
<!-- I'd like to be able to stop modifying here. -->
<!-- Content chunk 2 -->
<table border="1">
<tr>
<td>This is data chunk 1</td>
<td>This is data chunk 2</td>
<td>This is data chunk 3</td>
<td>This is data chunk 4</td>
<td>This is data chunk 5</td>
</tr>
</table>
<!-- I have to stop modifying here. -->
<!-- Footer -->
<div style="float: clear; text-align: center;">
Here's a footer of some kind. I don't want to be overlapped.
</div>
</div>
</body>
</html>顺便说一句，我知道内容区域周围的css样式语句并不理想。我没有编码他们，我只需要处理他们。
我没有多少运气，yet...but，我也知道css不是我的专长所在。
有什么建议吗？还是毫无希望？
编辑：，我对这个问题做了一些修改，试图改进clarity...hopefully，去掉一两次否决。非常感谢你们中已经做出回应的人.我现在就开始对这些答复进行评估。
Stack Overflow用户
发布于 2009-02-13 19:11:42
如果我理解正确，我认为您正在寻找类似于以下内容的内容：
<!DOCTYPE html PUBLIC "-//W3C//Dtd Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<body>
<div style="margin: 11px auto; width: 775px; position: relative">
<!-- Menu -->
<div style="position: absolute; width:160px; left: 0; top: 0; border:#999 1px dashed;">
Menu Item 1<br />
Menu Item 2<br />
</div>
<!-- Main content area -->
<div style="margin-left: 165px">
<!-- I'm able to start modifying here. -->
<!-- Content chunk 1 -->
<table border="1">
<tr>
<td>This is data chunk 1 withALongChunkThatDoesn'tDivideWell</td>
<td>This is data chunk 2 withALongChunkThatDoesn'tDivideWell</td>
<td>This is data chunk 3 withALongChunkThatDoesn'tDivideWell</td>
<td>This is data chunk 4 withALongChunkThatDoesn'tDivideWell</td>
<td>This is data chunk 5 withALongChunkThatDoesn'tDivideWell</td>
</tr>
</table>
<!-- I'd like to be able to stop modifying here. -->
<!-- Content chunk 2 -->
<table border="1">
<tr>
<td>This is data chunk 1</td>
<td>This is data chunk 2</td>
<td>This is data chunk 3</td>
<td>This is data chunk 4</td>
<td>This is data chunk 5</td>
</tr>
</table>
<!-- I have to stop modifying here. -->
<!-- Footer -->
<div style="float: clear; text-align: center;">
Here's a footer of some kind. I don't want to be overlapped.
</div>
</div>
</body>
</html>上面的CSS做了如下工作:使外部div相对位置，这允许您然后采取菜单div，并将它绝对定位在它的左上角。然后，在内容的左边放一个165 on的左边距。任何不适合内容空间的内容都应该溢出到右侧。我没有任何方法在IE6中进行测试，这在Safari中是有效的，在Firefox中也是如此。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/546754
复制相关文章
相似问题
腾讯云开发者
