我想把两个<div>放在一起。右边<div>大约是200px;而左边<div>必须填满剩下的屏幕宽度?我该怎么做呢?
当前回答
我今天遇到了这个问题。基于以上的解决方案,这对我来说是有效的:
<div style="width:100%;">
<div style="float:left;">Content left div</div>
<div style="float:right;">Content right div</div>
</div>
简单地让父div跨越全宽度和浮动div包含在其中。
其他回答
更新
如果需要在一行中放置元素,可以使用Flex Layout。这里有另一个Flex教程。它是一个很棒的CSS工具,尽管它不是100%兼容,但它的支持每天都在变得更好。这很简单:
HTML
<div class="container">
<div class="contentA"></div>
<div class="contentB"></div>
</div>
CSS
.container {
display: flex;
width: 100%;
height: 200px;
}
.contentA {
flex: 1;
}
.contentB {
flex: 3;
}
你得到的是一个总大小为4个单元的容器,它与其子单元以1/4和3/4的关系共享空间。
我已经在CodePen中做了一个例子来解决你的问题。我希望这能有所帮助。
http://codepen.io/timbergus/pen/aOoQLR?editors=110
非常古老的
也许这只是无稽之谈,但你试过用桌子吗?它不直接使用CSS来定位div,但它工作得很好。
你可以创建一个1x2的表格,把你的div放在里面,然后用CSS格式化表格,把它们放在你想要的地方:
<table>
<tr>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
</tr>
</table>
Note
如果你想避免使用表,如前所述,你可以使用float: left;和float: right;在下面的元素中,不要忘记添加一个clear: left;, clear: right;或明确:两者;为了清洁这个位置。
我的一个网站做了类似的事情:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style TYPE="text/css"><!--
.section {
_float: right;
margin-right: 210px;
_margin-right: 10px;
_width: expression( (document.body.clientWidth - 250) + "px");
}
.navbar {
margin: 10px 0;
float: right;
width: 200px;
padding: 9pt 0;
}
--></style>
</head>
<body>
<div class="navbar">
This will take up the right hand side
</div>
<div class="section">
This will fill go to the left of the "navbar" div
</div>
</body>
</html>
这不是每个人的答案,因为它在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;
}
您可以使用flexbox布局您的项目:
#{母公司 显示:flex; } #{狭窄 宽度:200 px; 背景:lightblue; /*这样就可以看到*/ } #{宽 flex: 1; /*扩展到容器的其余部分*/ 背景:lightgreen; /*这样就可以看到*/ } < div id = "父" > <div id=" width "> width(其余的宽度)</div> <div id="窄">窄(200px)</div> < / div >
这基本上只是flexbox的表面。Flexbox可以做一些非常了不起的事情。
对于老式浏览器的支持,你可以使用CSS float和width属性来解决这个问题。
#{狭窄 浮:正确; 宽度:200 px; 背景:lightblue; } #{宽 浮:左; 宽度:calc(100% - 200px); 背景:lightgreen; } < div id = "父" > <div id=" width "> width(其余的宽度)</div> <div id="窄">窄(200px)</div> < / div >
div1 {
float: right;
}
div2 {
float: left;
}
只要你为分隔这两个列块的元素设置clear:这就可以正常工作。
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?