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

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 left 占据了 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

检查一下正确的 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

使用这种风格，你只需要在 % 中使用 all。（不是在 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

这就是 float 的作用：将其向左推，直到没有空间为止，然后将其放在下一行。

你可以改用这个：

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

}