在单行填充空间中显示两个div - CSS [英] Display two divs in a single line filling space - CSS
问题描述
我有两个div diva
和 divb
。它们的固定高度为 30px
。我想将它们显示在一行,一个接一个。这可以通过分别给出 10%
和 90%
的宽度和 float :left
。这工作正常。但我给他们一个 1 px
的边界,这扰乱了计算。我给第二个div的宽度 88%
并且正在工作。但是在那个div之后有一个空白的空间。
I have two divs diva
and 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 px
and 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.
我想要在一行中显示两个div。页面大小,我想要div填充空间,所以我不能给他们固定的宽度。第一个div可以给定一个固定宽度,因为我只是想要 150 px
宽。
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 px
wide. But the second div must be wider to fill space.
我得到的是这个;
我想要这样:
这里 是小提琴。
Here is the fiddle.
推荐答案
向主体添加 width:100%
,并指定 float:left;
在div1上,并删除div2上的 float:left;
。
Add a width: 100%
to the body and specify float: left;
on div1 and remove the float: left;
on the 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.
修理它! :)
祝你好运!
这篇关于在单行填充空间中显示两个div - CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!