ie8和ie7的2列div [英] 2 columns div for ie8 and ie7

问题描述

我想要一个有2个单元格的行，该行和2个单元格必须是百分比。
i尝试这样做：

i want a row with 2 cells, the row and the 2 cellsmust be in percent. 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>

但是它不显示correctl，当我调整大小时，右边的列放在第一列。 p>

but it doesnt display correctl, when i resize, the right columns go down the first column.

推荐答案

由于 CSS框模型工作，有两个相邻的框，其组合宽度加起来100％（或其容器的宽度）将导致一个框被下推下

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.

您应确保两个列元素没有边距，填充或边框。除了您对列的宽度为70％/ 30％之外，还会将添加到元素的宽度。

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.

更新：在评论中提到的大米，许多浏览器都有舍入错误，导致超过100％的宽度被渲染。这可以在 PositionIsEverything的演示页上看到。我已经更新了我的答案考虑到这一点。

UPDATE: As ricebowl mentioned in the comments, many browsers have rounding errors that result in more than 100% width being rendered. This can be seen on PositionIsEverything's demo page. I've updated my answer to take this into consideration.

我还更新了我的解决方案，以包括您提到的列溢出问题的修复。现在，如果列的内容太大，将出现一个滚动条。如果你不想要滚动条，你可以使用 overflow-x：hidden ，但是这会剪切内容。

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.

/* 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; 。

I just tested this out in Firefox 3.5, IE7, IE8, & Google Chrome 3. It works identically in all three browsers. I would avoid using 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.

这篇关于ie8和ie7的2列div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！