在单行填充空间中显示两个div - CSS

我有两个div diva和divb。他们有一个固定的高度30px。我想一个接一个地显示在一行中。这可以通过分别给出它们的宽度10%和90%和float: left来完成。这工作正常。但是我给了他们一个1 px的边界，这会干扰计算。我给第二个div的宽度为88%，并且正在工作。但是在那之后有一个空的空间。在单行填充空间中显示两个div - CSS

我希望这两个div显示在一行中。页面的大小和我想divs来填充空间，所以我不能给他们固定的宽度。第一个div可以给定一个固定的宽度，因为我只想要它是宽的。但第二个div必须更宽才能填满空间。

我得到的是这个;

Current layout

，我想这一点：

Expected layout

Here是小提琴。

来源

2012-04-17 blasteralfred Ψ

Ckeck [本文]（HTTP：//www.barelyfitz。你可以使用位置：绝对，“边距”或“左” – Save 2012-04-17 12:28:00

边框实际上是在每个div上添加2px（1px left + 1px right） – 2012-04-17 12:28:08

在身体上添加width: 100%，并在div1上指定float: left;，并删除div2上的float: left;。

如果您在子元素上使用百分比宽度或高度，则必须在父容器元素或相当容器元素上指定百分比宽度或高度。

这应该解决它！ :)

See this fiddle here

祝你好运！

来源

2012-04-17 12:27:12

。我知道了...... :) – 2012-04-17 12:37:17

试试这个

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; 
}

不那么IE浏览器虽然很大

来源

2012-04-17 12:28:56 Ollie

在ASP.NET页面中为Firefox做了一些窍门。 “浮动：左”。 – pbies 2013-10-23 17:49:40

集箱尺寸：边界盒;浮动div与％宽度。

https://developer.mozilla.org/En/CSS/Box-sizing

来源

2012-04-17 12:29:27

另外，您可以添加额外的div与添加的边框

http://jsfiddle.net/ollie/76Raj/9/

来源

2012-04-17 12:37:06 Ollie

http://jsfiddle.net/J7mJX/1/

不会影响父div的宽度仅仅增加

#div1, #div2 { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

所以边界包含在宽度计算中。

来源

2012-04-17 12:37:06 fcalderan

<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>

来源

2017-09-28 08:29:22 arun

在单行填充空间中显示两个div - CSS

回答

相关问题