Question

我没有找到我这个具体案例的答案，所以我决定提出一个新问题。我希望页面左侧有2个DIV（固定宽度），右侧有一个DIV，占据页面宽度的其余部分。右边的单个DIV也应该有独立的高度（当它的高度增加时，它不应该影响左边DIV的高度或位置）。这样的事情就是我想要的：

Divs

这是HTML代码：

<body>
    <div class="div1">Div1</div>
    <div class="div3">Div3</div>
    <div class="div2">Div2</div>
</body>

这是我现在拥有的CSS：

div.div1 {
    float: left;
    height: 400px;
    margin-right: 10px;
    width: 200px;
}

div.div3 {
    height: 425px;
    overflow: hidden;
}

div.div2 {
    clear: left;
    float: left;
    height: 15px;
    margin-top: 10px;
}

唯一的问题是Div2的顶部位置受到Div3高度的影响，我得到这样的结果： Wrong DIVs

Answer 1

试试这个：

<html>
<head>
<style>
    div.div1 {
        float: left;
        height: 400px;
        margin-right: 10px;
        width: 200px;
        background-color: blue;
    }
    div.div2 {
        clear: left;
        float: left;
        height: 15px;
        width: 200px;
        margin-top: 10px;
        background-color: red;
    }    
    div.div3 {
        height: 425px;
        overflow: hidden;
        background-color: green;
    }
</style>
</head>
<body>
    <div class="div1">Div1</div>
    <div class="div2">Div2</div>
    <div class="div3">Div3</div>
</body>
</html>

一旦我重新订购了Div并为Div 2增加了宽度，它就可以正常使用

https://jsfiddle.net/6g7qx26b/

如果用最小高度属性替换css高度属性，这也有效，从而提供更大的灵活性。宽度也可以百分比指定

Answer 2

在http://jsfiddle.net/cz2fP/

上查看

<div style="float:left;">
    <div class="div1">Div1</div>
    <div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>

将左div元素分组为另一个div元素。

Answer 3

现在你可以使用溢出的正确内容：隐藏并且不与左div相冲突。

检查一下： http://jsfiddle.net/6UyTr/1/

div.left-content { margin-right: 10px; overflow: hidden; width: 200px; float: left; }

Answer 4

div.div1 {
height: 400px;
margin-right: 10px;
width: 200px;
background: red;
float: left;
}
div.div3 {
height: 15px;
margin-top: 10px;
margin-right: 10px;
background: green;
clear: both;
width: 200px;

}
div.div2 {
   height: 425px;
overflow: hidden;
background: blue;
float: left;
width: 200px;
}

<div style="float:left;">
    <div class="div1">Div1</div>
    <div class="div2">Div2</div>
</div>

<div class="div3">Div3</div>

请参阅此链接http://jsfiddle.net/bipin_kumar/cz2fP/3/

Answer 5

<style>
    div.left{
        float: left;
    }

    .main{
        width : 100%;
    }

   .clear{
        clear : both;
   }

    div.div1, div.div2 {
      margin-right: 10px;
      width: 200px;
      background: red;
   }

   div.div1 {
      height: 400px;
   }
</style>

<body>
    <div class="main">
        <div class="left">
            <div class="div1">Div1</div>
            <div class="div2">Div2</div>
        </div>  
        <div class="div3">Div3</div>
        <div class="clear"></div>
    </div>
</body>

http://jsfiddle.net/rkpatel/qd6Af/1/

Answer 6

试试这个

<body>
    <div class="left">
    <div class="div1">Div1</div>
    <div class="div2">Div2</div>
    </div>
    <div class="div3">Div3</div>

</body>

DEMO

Answer 7

  <div class="main">
    <div class="div1">
     <div class="div2"></div>
     <div class=="div3"></div>
    </div>
    <div class="div4"></div>
   </div>

并在css中使用min-height property

.div1 {
 float:left;
}
.div4 {
float:right;
}
.main {
min-height:200px;
}

HTML和CSS：左边是2个DIVS，右边是1个独立的DIV

7 个答案: