Html 如何并排放置第二个宽度为 100% 的两个 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4328336/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to position two divs side by side where the second width is 100%?
提问by BrunoLM
I want to achieve this:
我想实现这一目标：
width=60px width = remaining space
|------| |-----------------------------------|
| div1 | | Loren ipsun... |
|------| | |
| div2 |
|-----------------------------------|
Is it possible to place two divs side-by-side leaving the second div with all remaining space?
是否可以并排放置两个 div，让第二个 div 保留所有剩余空间？
回答by AgentConundrum
Just float the first div, and set the margin-left of the second div to accommodate the width of the first div. Something like this:
只需浮动第一个 div，并设置第二个 div 的 margin-left 以适应第一个 div 的宽度。像这样的东西：
div.one {
width: 60px;
float: left;
}
div.two {
margin-left: 60px;
}
Keep in mind that the widthCSS property on the div only applies to the content, so you need to set the margin-leftto be the sum of the width, border, margin, and paddingproperties of the first div.
请记住，width在DIV + CSS属性只适用于内容，所以你需要设置margin-left成为总和width，border，margin，和padding第一个div的属性。
Hereis the updated version of your jsfiddle. Let me know if you have any questions about it.
这是您的 jsfiddle 的更新版本。如果您对此有任何疑问，请告诉我。
回答by Ayaz Malik
Here is how it will be done :
这是如何完成的：
.image {
background:green;
color:green;
height:60px;
position:absolute;
width:60px;
}
.content {
background:blue;
color:white;
margin-left:60px;
}
回答by ryryan
Here it is:
这里是：
CSS:
CSS：
#container { background: silver; width: 100% }
.image
{
background: green; color: green;
width: 60px; height: 60px;
float: left;
}
.content
{
background: blue; color: white;
margin-left: 60px;
}
And on jsFiddle(It's playing up at the moment)
在jsFiddle 上（目前正在播放）
Hope this helps!
希望这可以帮助！
回答by amypellegrini
Try this:
尝试这个：
<html>
<head>
<title>Tabla de contenidos - Template</title>
<style type="text/css">
div {
border: 1px solid #000000;
}
#divleft{
width: 60px;
float: left;
}
#divright{
display: block;
margin-left: 62px;
}
</style>
</head>
<body>
<div id="divleft">This DIV has a width of 60px.</div>
<div id="divright" >This DIV occupies the rest of the page...</div>
</body>
</html>
The 62px margin is to avoid overlap the 1 extra px of each border.
62px 的边距是为了避免与每个边框的 1 个额外 px 重叠。
回答by tim
another option is to use the flexible box model
另一种选择是使用弹性盒模型
this working proposal is supported in recent firefox, chrome, and safari.
这个工作提案在最近的 firefox、chrome 和 safari 中得到支持。
it can be ported to unsupported browsers using flexie.js.
回答by Lucas Matos
there is new way to arrange elements whit CSS3 Check here this page Flexbox Froggy, a game where you help Froggy and friends by writing CSS code!
使用 CSS3 排列元素的新方法在这里查看此页面Flexbox Froggy，这是一款您可以通过编写 CSS 代码来帮助 Froggy 和朋友的游戏！
Guide this frog to the lilypad on the right by using the justify-content property, which aligns items horizontally and accepts the following values:
使用 justify-content 属性将这只青蛙引导到右侧的 lilypad，该属性将项目水平对齐并接受以下值：
- flex-start: Items align to the left side of the container.
- flex-end: Items align to the right side of the container.
- center: Items align at the center of the container.
- space-between: Items display with equal spacing between them.
- space-around: Items display with equal spacing around them.
- flex-start：项目与容器的左侧对齐。
- flex-end：项目与容器的右侧对齐。
- center：项目在容器的中心对齐。
- space-between：项目以相等的间距显示。
- space-around：项目以相等的间距显示。
