Question

我想在彼此旁边创建两个div，但是我希望左侧的那个是300px，而右边的那个占据屏幕上的剩余量。怎么可能呢？谢谢！

Answer 1

最直接（我会说正确）的方法是使用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元素section和aside，如果您有HTML5 doctype，则应该使用这些元素。我必须记得使用那些......

Answer 2

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

Explenation：
1.将两个元素放在一个容器中 2.将左侧元素置于绝对位置，将其宽度设置为300px 3.将右边元素的左边距设置为300px。

Answer 3

一个解决方案是float: left;左div 300px宽，然后将overflow: 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;
}

还有一个小小的演示：little link。

Answer 4

这适用于较新的浏览器（不是IE）：

<强> CSS ：

#container {
    display: box;
}

#left {
    width: 400px;
}

#right {
    box-flex: 1;
}

<强> HTML ：

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

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

Answer 5

这应该足够了：

<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: 300px和margin-left: 300px一起确保如果右列高于左侧，则不会在下方左侧浮动div;它将与容器div的左边缘保持300倍的间隙

提示：更改为margin-left: 320px以添加20px排水沟

这是一个不错的小DEMO

让Div在右侧填写所有可用空间

5 个答案: