Question

请看看这个例子：http://jsfiddle.net/yU6qG/5/

<div class="left">LeftMargin</div>
<div class="right">RightMargin</div>

.left {
    float:left;
    width: 100px;
    height: 100%;
    background-color : red;
}
.right {
    float:left;
    width: auto;
    height: 300px;
    background-color : blue;

}

如果您尝试调整窗口大小，您将看到正确的div将跳下一行。我怎么能阻止这个？另外，为什么nto离开占据了100％的高度？

由于

Edit1：抱歉，目前尚不清楚，这是一个响应式设计，正确的div会增长和缩小。

Answer 1

这是你想要的：http://jsfiddle.net/894Z8/3/

现在没有height:100%这样的东西，你需要做一些CSS技巧来实现它们，因为这个属性意味着父亲身高的100％。

你想要的是将div显示为一个表，你可以使用以下CSS（与IE 6和7不兼容）来实现它

<强>标记

<div class="table">
  <div class="left">LeftMargin</div>
  <div class="right">RightMargin</div>
</div>

<强> CSS

.table {
    display: table;
}
.left {
    display:table-cell;
    min-width: 100px;
    height: 100%;
    background-color : red;
}
.right {
    display: table-cell;
    width: auto;
    height: 300px;
    background-color : blue;

}

div和class Table是可选的，但为了更好的兼容性，请添加它。这样，您可以将div的高度扩展到另一个，并且在调整窗口大小时不会减小它。

Answer 2

check this out正确的div总是覆盖可用空间，并且在屏幕调整大小时无法到达下一行

.left {
    float:left;
    width: 100px;
    height: 300px;
    background-color : red;
}
.right {
    display: block;
    height: 300px;
    background-color : blue;
    box-sizing: border-box;
    -moz-box-sizing: border-box; 
    width: 100%;
    min-width: 200px;
}

Answer 3

使用此样式，您只需要使用％in。（不在px中）

.left {
    float:left;
    width: 25%;
    height: 100%;
    background-color : red;
}
.right {
    float:left;
    width: 50%;
    height: 125px;
    background-color : blue;

}

Answer 4

更改右侧div的css

.right {
    width: 200px;
    height: 300px;
    margin-left:100px;
    background-color : blue;
}

要使正确的div有响应，您需要应用百分比。填写你喜欢的。

.right {
    width: 60%;
    height: 300px;
    margin-left:100px;
    background-color : blue;
}

小提琴：http://jsfiddle.net/djwave28/yU6qG/7/

Answer 5

你只需要在它周围放一个包装;）

<div id="container">
<div class="left">LeftMargin</div>
<div class="right">RightMargin</div>

你的CSS很简单：

#container {
    width: 300px;
}

http://jsfiddle.net/3zUcZ/

Answer 6

这就是浮子的作用：向左推，直到没有剩余空间，然后将它放在下一行。

你可以改用它：

<div class="parent">
    <div class="left">LeftMargin</div>
    <div class="right">RightMargin</div>
</div>

.left {
    display: inline-block;
    width: 100px;
    height: 100%;
    background-color : red;
}
.right {
    display: inline-block;
    width: 200px;
    height: 300px;
    background-color : blue;
}
.parent{
    width: 310px;
    border: 1px solid black;

}

如何防止元素跳到第二行？

6 个答案: