两列div布局，其中一个占据剩余空间

Question

两列div布局，其中一个占据剩余空间

5

给定以下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 中的一个 bug，因此我正在尝试找到其他布局来解决此问题。使用 divs 可以解决问题，但现在主视图在其他浏览器中无法扩展以填满屏幕。

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

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

- Staale

我认为你想要的（两列动态宽度）无法在没有表格的情况下实现。也许你可以提供更多关于IE6问题的信息，这样有人就可以帮助解决了。 - Ray

5个回答

1

试试这个：

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

这样你的右边div将占据剩余的空间。但你要小心清除浮动。

- Igor Zinov'yev

这会在左列设置一个固定宽度，但我希望左列能根据内容自适应缩放。 - Staale

1

也许有一种干净的方式可以做到这一点，但我看不到。也许你应该确定一些树将使用的特定宽度并将其固定设置？根据我的经验，定义列宽的站点只是比适合内容的站点好看。 - Igor Zinov'yev

@Staale嗯，这不是你的问题所说的...可能应该编辑它说“第一个”而不是第二个列（div）。 - Mark Schultheiss

1

在这个解决方案中，我们有一个自动填充的#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>

- Daniel

0

试试这个：

<!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之间只有很小的间隙。

- Midas

0

看起来你需要一个表格。我认为你应该尝试使用ie6和表格来解决你的问题。

- Alsciende

这就是我最终做的。 - Staale

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sampson · Accepted Answer

这听起来正是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