Question

我想要一个有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>

但它没有显示正确的，当我调整大小时，右列会在第一列中显示。

Answer 1

由于CSS box model的工作方式，彼此相邻的2个框的组合宽度加起来为100％（或其容器的宽度）将导致一个框被推到另一个框下方很多情况。

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

更新：在评论中提到的饭碗时，许多浏览器都会出现舍入错误，导致渲染宽度超过100％。这可以在PositionIsEverything's demo page上看到。我已经更新了我的答案以考虑到这一点。

我还更新了我的解决方案，以包含您提到的列溢出问题的修复程序。现在，如果内容对于列太大，则会出现滚动条。如果您不想要滚动条，则可以使用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和＆amp;谷歌浏览器3.它在所有三种浏览器中的工作方式相同。我会避免使用display: inline-table;。根据我的经验，我从未在所有浏览器中始终如一地使用它。

如果需要添加边框，请使用容器元素上的faux columns执行此操作。由于您显然正在进行流畅的布局，您可能还想阅读liquid faux columns上的这篇文章。

Answer 2

<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>

Answer 3

使mainContent成为69％

删除容器显示。

Answer 4

我刚从我正在处理的项目中复制并粘贴此代码，应该提供帮助

#main {
    margin: auto;
    padding: 0px;
    width: 100%;
}

#mainleft {   
    float: left; width: 70%; clear: none;
}

#mainright {
    float: right; width: 30%; clear: none; position: relative;
}

Answer 5

只是为了扩展到达其他人的可能性：使用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;
}

jsfiddle

要添加一些间距，您可以对单元格应用左/右填充，它不会干扰布局，而且您可以通过添加单元格轻松地使其成为3列文本。这仅适用于IE8，因为该线程是关于IE8和7，但我认为这是一个非常好的解决方案。

ie8和ie7的2列div

5 个答案: