2列div，分别用于ie8和ie7
[英]2 columns div for ie8 and ie7
问题描述
i want a row with 2 cells, the row and the 2 cellsmust be in percent. 
我想要一行包含2个单元格，该行和2个单元格必须以百分比为单位。 i had tried to do it like this: 我曾尝试这样做：
#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>
but it doesnt display correctl, when i resize, the right columns go down the first column. 但它不显示正确，当我调整大小时，右列在第一列下移。
5 个解决方案
解决方案1
6 已采纳 2009-08-14 22:34:48
Because of the way the CSS box model works, having 2 boxes next to each other whose combined width adds up to 100% (or the width of its container) will cause one box to be pushed down below the other in many cases. 由于CSS盒子模型的工作方式，两个盒子彼此相邻，它们的合并宽度之和总计为100％（或其容器的宽度），在很多情况下会导致一个盒子被推到另一个盒子的下方。
You should make sure you have no margins, padding, or borders on your two column elements. 您应该确保两个列元素上没有边距，填充或边框。 This will be added to the width of your elements, in addition to the 70%/30% widths you have for your columns. 除了列的宽度为70％/ 30％之外，这还将添加到元素的宽度中。
UPDATE: As ricebowl mentioned in the comments, many browsers have rounding errors that result in more than 100% width being rendered. 更新：正如注释中提到的Ricebowl一样，许多浏览器都有舍入错误，导致呈现的宽度超过100％。 This can be seen on PositionIsEverything's demo page . 可以在PositionIsEverything的演示页面上看到。 I've updated my answer to take this into consideration. 我已经更新了答案以考虑到这一点。
I've also updated my solution to include a fix for the column overflow problem you mentioned. 我还更新了解决方案，以包括针对您提到的列溢出问题的修复程序。 Now, if the content is too large for the columns, a scrollbar will appear. 现在，如果列的内容太大，则会出现一个滚动条。 If you don't want scrollbars, you can use overflow-x: hidden instead, however this will cut content off. 如果您不希望使用滚动条，则可以使用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
}
A live demo of this can be seen here: http://jsbin.com/eyise 可以在此处查看其实时演示： http : //jsbin.com/eyise
I just tested this out in Firefox 3.5, IE7, IE8, & Google Chrome 3. It works identically in all three browsers. 我刚刚在Firefox 3.5，IE7，IE8和Google Chrome 3中进行了测试。它在所有三种浏览器中的工作方式都相同。 I would avoid using display: inline-table; 我会避免使用display: inline-table; . 。 In my experience, I've never had very much luck using it consistently across all browsers. 根据我的经验，我从未在所有浏览器中一致使用过它。
If you need to add a border, do so using faux columns on the container element. 如果需要添加边框，请使用容器元素上的人造列 。 And since you're obviously doing a liquid layout, you may also want to read this article on liquid faux columns . 而且，由于您显然是在进行液体布局，因此您可能还需要阅读有关液体人造色谱柱的文章。
解决方案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
Just to extend the possibilities for others who get here: use display: table-cell; 只是为了给来到这里的其他人扩展可能性：使用display: table-cell; , works pretty well and has no rounding errors. ，效果很好，没有舍入错误。 Example: 例：
HTML HTML
<div class="table">
<div class="cell">textytext</div>
<div class="cell">textytext</div>
</div>
CSS CSS
.table {
display: table;
width: 100%;
}
.table .cell {
display: table-cell;
text-align: left;
vertical-align: top;
}
To add some spacing you can apply left-/right-padding to the cell, it won't interfere with the layout, plus you can easily make it a 3-column text by adding a cell. 要增加一些间距，您可以对单元格应用左/右填充，它不会干扰布局，而且您可以通过添加单元格轻松地使其成为3列文本。 This only works for IE8, since the thread is about IE8 and 7, but I think it's a really nice solution. 这仅适用于IE8，因为该线程是关于IE8和7的，但是我认为这是一个非常好的解决方案。
解决方案4
0 2009-08-14 22:16:48
Make the mainContent 69% 制作主要内容69％
And remove the container display. 并取下容器的显示屏。
解决方案5
0 2009-08-14 22:18:22
I have just copied and paste this code from a project I am working on, should help 我刚刚从正在处理的项目中复制并粘贴了此代码，应该会有所帮助
#main {
margin: auto;
padding: 0px;
width: 100%;
}
#mainleft {
float: left; width: 70%; clear: none;
}
#mainright {
float: right; width: 30%; clear: none; position: relative;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.