两列 div 布局，一列取余

Question

给定以下 html：

<body>
<div style="float: left; background: red">Hi</div>
<div style="float: left; background: blue">Hi again</div>
</body>

我希望第二个 div 将剩余的宽度从页面中取出。将宽度设置为 100% 将使其换行到下一行，我不知道还要设置什么来修复它。左列需要根据其内容调整大小，而右列则需要提醒的水平空间。

我知道我可以用表格做到这一点，但在实际应用中，这会导致 IE6 中的其他问题。在应用程序中，左列是一棵树，其余的是主视图。树可以倒塌。此外，还有使用 Dojo 的弹出 div。当显示和移动弹出 div 时，右列（以表格形式）扩展以与 IE6 中的左列重叠。是的，这是 IE 中的一个错误，所以我正在尝试找到一个替代布局来解决这个问题。它适用于 div，但现在主视图不会扩展以填充其他浏览器的屏幕。

这是一个更好的破解版本。我需要修复它，以便表格不会扩展页面宽度并为此添加水平滚动：

<div style="float: left; background: red; padding: 5px; margin: 5px;">Hi</div>
<div style="background: blue">
<table width="100%"><tr><td bgcolor="green">
Hi again
</td></tr></table>
</div>

Answer 1

这听起来就像 flexbox 能够解决的问题。下面我使用标准的 flexbox 语法，但一些旧版浏览器可能需要前缀才能正常运行。

<div class="columns">
  <div class="column">
    <p>Hello, World.</p>
  </div>
  <div class="column">
    <p>Content Area</p>
  </div>
</div>

.columns { 
    display: flex; 
}
.column:nth-of-type(2) { 
    flex: 1;
}

这将为您提供您正在寻找的结果：一列随内容增长，另一列仅占用剩余空间。这里的一个建议是将min-width 值应用于弯曲列，以防止它变得太小。

演示：http://codepen.io/anon/pen/LglvH

Answer 2

试试这个：

<body>
<div style="float: left; background: red; width: 200px; ">Hi</div>
<div style="background: blue; margin-left: 210px; ">Hi again</div>
</body>

这样你的右 div 将占据剩余的空间。但是你必须注意清理。

Answer 3

在这个解决方案中，我们有一个自动填充的#left 元素，它将适合#container。 #right 将绝对定位在#left 之上，因此它始终位于#container 的右上角。此外，我们在#left 容器上添加了padding-right: Xpx;，这样它的内容就不会滑到#right 之下。

CSS

#container {
    position: relative; /* used to make the #right element absolutely position relative to #container */
}

#right {
    width: 100px; /* define width */
    position: absolute;
    right: 0px;
    top: 0px;
}

#left {
    padding-right: 100px; /* match defined width */
}

HTML

<div id="container">
    <div id="left"></div>
    <div id="right"></div>
</div>

Answer 4

看来您需要一张桌子。我认为您应该尝试使用 ie6 和表格来解决您的问题。

Answer 5

试试这个：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
    margin:0;
    padding:0
}
html, body {
    height:100%
}
#left {
    background:red;
    float:left;
    height:100%;
    overflow:hidden
}
#right {
    background:blue;
    height:100%
}
</style>
</head>
<body>
<div id="left">
    <p><img src="http://www.google.be/intl/en_com/images/logo_plain.png" alt="Google" /></p>
</div>
<div id="right"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit massa vel nisi suscipit tincidunt. Proin tortor massa, pellentesque eget pharetra et, rutrum eu purus. Pellentesque iaculis justo a erat ultricies sodales. Nunc eu justo felis. Nullam fermentum erat sed ligula interdum consectetur imperdiet odio sagittis. Mauris sodales magna ornare dui imperdiet pretium. Donec augue erat, suscipit at aliquet vel, sodales id lorem. Aenean id fermentum est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin hendrerit ligula a neque placerat condimentum at ornare odio. Etiam metus augue, fringilla malesuada vestibulum eget, gravida sed mauris. Pellentesque non orci eget libero placerat vehicula. Vivamus iaculis bibendum risus, ac venenatis tellus consequat convallis. Nam tristique eros quis odio commodo venenatis. Suspendisse volutpat euismod mi eu facilisis. Quisque malesuada libero quis est suscipit et cursus augue rhoncus. Pellentesque molestie convallis nibh at pretium.</p></div>
</body>
</html>

IE6 中div 之间只有一点差距。