两列布局非常常见，到目前为止，我按照概述实现它 in this question :右 div 向右浮动并具有例如宽度 200px，左侧 div 的 margin-right 为 200px。
因此，要删除右侧 div，您必须将其从 HTML 中删除，并且 - 这是令人不快的部分 - 从左侧 div 中删除 margin-right。
我想知道是否可以在不在 CSS 中进行任何此类更改的情况下获得相同的效果。
这是测试页面:http://pastie.org/1669826
目标:
div#right present in HTML: div#right not present in HTML:
+---------------------+ +---------------------+
| | | |
+---------------------+ +---------------------+
+----------------+ +--+ +---------------------+
| | | | | |
| | +--+ | |
| | | |
| | | |
+----------------+ +---------------------+
+---------------------+ +---------------------+
| | | |
+---------------------+ +---------------------+
适用于 FF 和 WebKit 但不适用于 IE 的部分解决方案:将 div#right 的高度设置为 100%，并将其移至 div#left 内。
期待您的想法!
最佳答案
假设需要等高的列，这是一个很好的方法。
首先，确保添加文档类型作为第一行:
<!DOCTYPE html>
否则你会得到Quirks Mode = 不好，不好，不好。
Live Demo
Live Demo (删除右侧 div 的完全相同的代码)
这适用于所有现代浏览器和 IE8。如果没有一些疯狂的修改，它就无法在 IE7 中运行。
您需要 IE7 支持吗？
<!DOCTYPE html>
<html>
<head>
<style>
#header {
border: 1px solid green;
}
#left {
border: 1px solid red;
}
#right {
border: 1px solid blue;
width: 300px;
}
#footer {
border: 1px solid green;
}
#container {
display: table
}
#left, #right {
display: table-cell
}
</style>
</head>
<body>
<div id="body">
<div id="header">
<p>Header</p>
</div>
<div id="container">
<div id="left">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
关于html - 不使用边距的两列布局(一列可选)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5298144/