Html 在一行填充空间中显示两个 div - CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10191228/
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
Display two divs in a single line filling space - CSS
提问by blasteralfred Ψ
I have two divs divaand divb. They have a fixed height of 30px. I want to display them in a single line, one after the other. This can be done by giving them widths of 10%and 90%respectively and by float: left. This works fine. But I gave them a border of 1 pxand this disturbs the calculation. I gave the second div a width of 88%and is working. But there is an empty space after that div.
我有两个 divdiva和divb. 它们的固定高度为30px。我想一行一行地显示它们。这可以通过分别为它们提供10%和90%和 的宽度来完成float: left。这工作正常。但是我给了他们一个边界，1 px这会干扰计算。我给了第二个 div 的宽度88%并且正在工作。但是在那个 div 之后有一个空白空间。
I want both the divs to display in a single line. The page re sizes and I want divs to fill space and so that I can't give them fixed width. The first div may be given a fixed width, because I just want it 150 pxwide. But the second div must be wider to fill space.
我希望两个 div 都显示在一行中。页面重新调整大小，我希望 div 填充空间，因此我不能给它们固定宽度。第一个 div 可能有一个固定的宽度，因为我只想要它150 px宽。但是第二个 div 必须更宽才能填充空间。
What I am getting is this;
我得到的是这个；
and I want this:
我想要这个：
Hereis the fiddle.
这是小提琴。
回答by Henrik Andersson
Add a width: 100%to the body and specify float: left;on div1 and remove the float: left;on the div2.
将 a 添加width: 100%到 body 并float: left;在 div1float: left;上指定并删除div2 上的 。
If you're using percentage widths or heights on child elements you have to specify a percentage width or height on the parent or rather container element as well.
如果您在子元素上使用百分比宽度或高度，则必须在父元素或容器元素上指定百分比宽度或高度。
That should fix it! :)
那应该解决它！:)
Good luck!
祝你好运！
回答by Ollie
Try this
尝试这个
body{
margin: 0;
}
#div1{
height: 30px;
width: 10%;
outline: solid 1px #000000;
background-color: #0066CC;
float: left;
}
#div2{
height: 30px;
width: 90%;
outline: solid 1px #000000;
background-color: #66CC00;
float: left;
}?
Not so great for IE though
虽然对 IE 来说不是很好
回答by Fabrizio Calderan
just add
只需添加
#div1, #div2 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
so the border is included on width calculation.
所以边框包含在宽度计算中。
回答by Joe Flateau
Set box-sizing:border-box; on the floated divs with % widths.
设置 box-sizing:border-box; 在具有 % 宽度的浮动 div 上。
回答by Ollie
Alternatively you can add extra divs that wont affect the width of the parent div with the added border
或者，您可以添加额外的 div，这些 div 不会通过添加的边框影响父 div 的宽度
回答by arun
<div style="display:table">
<div style="display: inline-block;width:100px;height:100px;background-color:red;">DIV 1</div>
<div style="display: inline-block;width:100px;height:100px;background-color:green;">DIV 2</div>
<div style="display: inline-block;width:100px;height:100px;background-color:blue;">DIV 3</div>
</div>