2列div，分别用于ie8和ie7
[英]2 columns div for ie8 and ie7
问题描述
我想要一行包含2个单元格，该行和2个单元格必须以百分比为单位。 我曾尝试这样做：
#container
{
width: 100%;
display:inline-table;
}
#sidebar1
{
float: left;
width: 30%;
}
#mainContent
{
float: left;
width: 70%;
}
<div id="container">
<div id="sidebar1">
<telerik:RadFileExplorer ID="RadFileExplorer1" runat="server" EnableCreateNewFolder="False"
EnableOpenFile="False" Skin="WebBlue" Width="" ExplorerMode="FileTree" TreePaneWidth="">
<Configuration SearchPatterns="*.*" ViewPaths="/" />
</telerik:RadFileExplorer>
</div>
<div id="mainContent">
<telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" Skin="WebBlue" />
</div>
</div>
但它不显示正确，当我调整大小时，右列在第一列下移。
5 个解决方案
解决方案1
6 已采纳 2009-08-14 22:34:48
由于CSS盒子模型的工作方式，两个盒子彼此相邻，它们的合并宽度之和总计为100％（或其容器的宽度），在很多情况下会导致一个盒子被推到另一个盒子的下方。
您应该确保两个列元素上没有边距，填充或边框。 除了列的宽度为70％/ 30％之外，这还将添加到元素的宽度中。
更新：正如注释中提到的Ricebowl一样，许多浏览器都有舍入错误，导致呈现的宽度超过100％。 可以在PositionIsEverything的演示页面上看到。 我已经更新了答案以考虑到这一点。
我还更新了解决方案，以包括针对您提到的列溢出问题的修复程序。 现在，如果列的内容太大，则会出现一个滚动条。 如果您不希望使用滚动条，则可以使用overflow-x: hidden代替，但这会切断内容。
/* Reset all margin, padding, border to baseline */
#container, #sidebar1, #mainContent {
margin: 0px;
padding: 0px;
border: 0px;
}
/* Apply styles for column layout */
#container {
width: 100%;
overflow: auto
}
#sidebar1 {
width: 29%;
float: left;
overflow-x: auto
}
#mainContent {
width: 69%;
float: right;
overflow-x: auto
}
可以在此处查看其实时演示： http : //jsbin.com/eyise
我刚刚在Firefox 3.5，IE7，IE8和Google Chrome 3中进行了测试。它在所有三种浏览器中的工作方式都相同。 我会避免使用display: inline-table; 。 根据我的经验，我从未在所有浏览器中一致使用过它。
如果需要添加边框，请使用容器元素上的人造列 。 而且，由于您显然是在进行液体布局，因此您可能还需要阅读有关液体人造色谱柱的文章。
解决方案2
1 2009-08-14 22:39:15
<style type="text/css">
#main {
margin: auto;padding: 0px;width: 100%;}
#mainleft {
float: left; width: 100%; clear: none; background-color: #993300;
}
#mainright {
float: right;
width: 30%;
clear: none;
position: relative;
background-color: #0033FF;
}
</style>
</head>
<body>
<div id="main"><div id="mainleft"><div id="mainright"></div>
</div>
</div>
</body>
解决方案3
0 2012-05-11 08:14:58
只是为了给来到这里的其他人扩展可能性：使用display: table-cell; ，效果很好，没有舍入错误。 例：
HTML
<div class="table">
<div class="cell">textytext</div>
<div class="cell">textytext</div>
</div>
CSS
.table {
display: table;
width: 100%;
}
.table .cell {
display: table-cell;
text-align: left;
vertical-align: top;
}
要增加一些间距，您可以对单元格应用左/右填充，它不会干扰布局，而且您可以通过添加单元格轻松地使其成为3列文本。 这仅适用于IE8，因为该线程是关于IE8和7的，但是我认为这是一个非常好的解决方案。
解决方案4
0 2009-08-14 22:16:48
制作主要内容69％
并取下容器的显示屏。
解决方案5
0 2009-08-14 22:18:22
我刚刚从正在处理的项目中复制并粘贴了此代码，应该会有所帮助
#main {
margin: auto;
padding: 0px;
width: 100%;
}
#mainleft {
float: left; width: 70%; clear: none;
}
#mainright {
float: right; width: 30%; clear: none; position: relative;
}
在IE7和IE8中将div居中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.