3

我有两个 divdiva和divb. 他们有一个固定的高度30px。我想在一行中显示它们，一个接一个。这可以通过分别给它们 和 的宽度10%和来完成。这工作正常。但是我给了他们一个边界，这扰乱了计算。我给了第二个 div 的宽度并且正在工作。但是那个 div 之后有一个空白区域。90%float: left1 px88%

我希望两个 div 都显示在一行中。页面重新调整大小，我希望 div 填充空间，这样我就不能给它们固定宽度。第一个 div 可能有一个固定的宽度，因为我只想要它150 px宽。但是第二个 div 必须更宽才能填充空间。

我得到的是这个；

当前布局

我想要这个：

预期布局

这是小提琴。

4

6 回答 6

11

将 a 添加width: 100%到正文并float: left;在 div1 上指定并float: left;在 div2 上删除。

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

那应该解决它！:)

在这里看到这个小提琴

祝你好运！

于 2012-04-17T12:27:12.467 回答
4

试试这个

 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-17T12:28:56.663 回答
3

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

只需添加

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

因此边框包含在宽度计算中。

于 2012-04-17T12:37:06.677 回答
2

设置 box-sizing:border-box; 在具有 % 宽度的浮动 div 上。

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

于 2012-04-17T12:29:27.227 回答
0

或者，您可以添加额外的 div，这些 div 不会影响带有添加边框的父 div 的宽度

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

于 2012-04-17T12:37:06.317 回答
0 

<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-28T08:29:22.087 回答