0

我想创建两个并排的 div,但是我希望左侧的一个为 300px,而右侧的一个占据屏幕上的剩余量。这怎么可能?谢谢!

4

5 回答 5

2

最直接(我会说正确)的方法是使用display: table

#wrapper {
    display: table;
    width: 100%;
}
#left, #right {
    display: table-cell;
    color: white;
}
#left {
    background: blue;
    width: 300px;
}
#right {
    background: red;
}

<section id="wrapper">
    <aside id="left">Left 300px</aside>
    <div id="right">Right the rest</div>
</section>

http://jsfiddle.net/YbLZE/1/

尝试调整右下框架的大小。

更新了HTML5元素sectionaside,如果你有HTML5 doctype. 我必须记住使用那些...

于 2012-09-08T19:26:25.567 回答
1

这是工作示例: http: //jsfiddle.net/tnm62/

说明:
1. 将两个元素放在一个容器中。
2. 将左侧元素定位为绝对,将其宽度设置为 300 像素。
3. 将右边元素的左边距设置为 300 像素。

于 2012-09-08T19:25:08.983 回答
1

一种解决方案是左侧float: left;较宽,然后适用于您的右侧。以下是基本大纲:div300pxoverflow: hidden;div

HTML:

<div class = "left">
    Glee is awesome!
</div>
<div class = "right">
    Glee is awesome!
</div>

CSS:

.left {
    width: 300px;
    float: left;
}
.right {
    overflow: hidden;
}

还有一个小演示:小链接

于 2012-09-08T19:31:54.003 回答
1

这是适用于较新浏览器(不是 IE)的内容:

CSS

#container {
    display: box;
}

#left {
    width: 400px;
}

#right {
    box-flex: 1;
}

​<strong>HTML:

<div id="container">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>​

演示:http: //jsfiddle.net/N5zhH/1/

于 2012-09-08T19:33:04.893 回答
1

这应该足够了:

<div style="overflow: hidden;">
    <div style="width: 300px; float: left;"></div>
    <div style="margin-left: 300px;"></div>
</div>
  • overflow: hidden将拉伸容器 div 以容纳最高的子元素
  • float: left将元素向左浮动(doh!)
  • width: 300pxmargin-left: 300px共同确保如果右列比左列高,它不会流到左浮动 div下方;它将与容器 div 的左边缘保持 300 倍的间隙

提示:更改为margin-left: 320px添加 20px 装订线

这是一个不错的小DEMO

于 2012-09-09T14:59:34.693 回答