我想把两个<div>放在一起。右边<div>大约是200px;而左边<div>必须填满剩下的屏幕宽度?我该怎么做呢?
当前回答
我遇到了同样的问题,Mohits版本的工作。如果你想在html中保持你的左右顺序,试试这个。在我的例子中,左边的div正在调整大小,右边的div保持宽度260px。
HTML
<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>
CSS
.box {
height: 200px;
padding-right: 260px;
}
.box .left {
float: left;
height: 200px;
width: 100%;
}
.box .right {
height: 200px;
width: 260px;
margin-right: -260px;
}
诀窍是在主框上使用右填充,但通过再次使用右边距放置右框来再次使用该空间。
其他回答
不幸的是,对于一般情况,这不是一个简单的问题。最简单的方法是添加一个css风格的属性“float: right;”到你的200px div,然而,这也会导致你的“main”-div实际上是全宽的,其中的任何文本都会漂浮在200px-div的边缘,这通常看起来很奇怪,这取决于内容(几乎在所有情况下,除非它是一个浮动图像)。
编辑: 正如Dom所建议的,包装问题当然可以用边缘来解决。愚蠢的我。
@roe和@MohitNanda所建议的方法是有效的,但是如果正确的div被设置为float:right;,那么它必须在HTML源代码中首先出现。这打破了从左到右的读取顺序,如果页面显示时关闭了样式,可能会导致混乱。如果是这样的话,使用包装器div和绝对定位可能会更好:
<div id="wrap" style="position:relative;">
<div id="left" style="margin-right:201px;border:1px solid red;">left</div>
<div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>
证明:
left right编辑:嗯,有意思。预览窗口显示了正确格式化的div,但呈现的post项没有。对不起,那你自己试试吧。
我不知道这是否是当前的问题,但我刚刚遇到了同样的问题,并使用CSS显示:内联块;标签。 将它们包装在div中,以便它们可以适当地放置。
<div>
<div style="display: inline-block;">Content1</div>
<div style="display: inline-block;">Content2</div>
</div>
请注意,inline style属性的使用只是为了简化这个示例,当然这些属性会被移动到外部CSS文件中。
这不是每个人的答案,因为它在IE7-中不受支持,但你可以使用它,然后使用IE7-的替代答案。它是display: table, display: table-row和display: table-cell。注意,这不是使用表格进行布局,而是样式化div,这样就可以很好地排列,省去上面的所有麻烦。我的是一个html5应用程序,所以它工作得很好。
本文展示了一个示例:http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/
下面是你的样式表的样子:
.container {
display: table;
width:100%;
}
.left-column {
display: table-cell;
}
.right-column {
display: table-cell;
width: 200px;
}
我遇到了同样的问题,Mohits版本的工作。如果你想在html中保持你的左右顺序,试试这个。在我的例子中,左边的div正在调整大小,右边的div保持宽度260px。
HTML
<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>
CSS
.box {
height: 200px;
padding-right: 260px;
}
.box .left {
float: left;
height: 200px;
width: 100%;
}
.box .right {
height: 200px;
width: 260px;
margin-right: -260px;
}
诀窍是在主框上使用右填充,但通过再次使用右边距放置右框来再次使用该空间。
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?