我想创建两个并排的 div,但是我希望左侧的一个为 300px,而右侧的一个占据屏幕上的剩余量。这怎么可能?谢谢!
问问题
1646 次
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>
尝试调整右下框架的大小。
更新了HTML5
元素section
和aside
,如果你有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;
较宽,然后适用于您的右侧。以下是基本大纲: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;
}
还有一个小演示:小链接。
于 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: 300px
并margin-left: 300px
共同确保如果右列比左列高,它不会流到左浮动 div下方;它将与容器 div 的左边缘保持 300 倍的间隙
提示:更改为margin-left: 320px
添加 20px 装订线
这是一个不错的小DEMO
于 2012-09-09T14:59:34.693 回答