代码之家 › 专栏 › 技术社区 › Staale

两列div布局,其中一列占其余部分

internet-explorer-6 html css

5

Staale · 技术社区 · 15 年前

给定以下html:

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

我知道我可以用表来实现这一点,但在实际应用中,这会导致IE6中出现其他问题。在应用程序中,左列是一棵树,其余的是主视图。这棵树可以倒下。此外,还有使用Dojo的弹出div。当一个弹出div被显示和移动时,右边的列(以表格的形式)扩展到与IE6中的左边列重叠。是的,这是IE中的一个bug,所以我正试图找到一个替代布局来解决这个问题。它与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>

5 回复 | 直到 15 年前

1

0

Alsciende 15 年前

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

2

3

Sampson 11 年前

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

3

1

Igor Zinov'yev 15 年前

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

这样,您的右div将占用剩余的空间。但你必须小心清理。

4

1

Daniel 13 年前

在这个解决方案中,我们有一个自动填充 #left #container . #right 使其始终位于 #容器 . 此外,我们还有 padding-right: Xpx; 上容器,使其内容物不会滑到下面 .

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>

5

0

Midas 15 年前

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

两者之间只有一点差距 div