Question

如果问题没有正确或明确地表达，我道歉。让我解释一下。

我在中间div中有4个div。看起来如下所示：

 --------------  -----------   -------------
|custExpBox    || techSumBox| |escalationBox|
 -------------  |           |  -------------
 -------------- |           |
|workaroundnBox||           |
 -------------   -----------

但我得到了：

 -------------   -----------   -------------
|custExpBox    || techSumBox| |escalationBox|
 -------------  |           |  -------------
                |           |
                |           |
 -------------  -----------
|workaroundBox|
 -------------

以下是html代码的精简版本：

<div id="middle">
    <div id="custExpBox"></div>          
    <div id="techSumBox">  </div>
    <div id="escalationBox"> </div>
    <div id="workaroundBox"> </div>
</div>

CSS代码：

#middle{

    width:100%;
    margin-top:16px;
    margin-bottom: 5px;
    display:inline-block;
    border:1px dashed black;
}

#custExpBox{

    display: inline-block;
    float:left;
    width:40%;
    background-color:#EAF2D3;
    line-height:17px;
    padding:3px;
    height:200px;
    overflow:scroll;

}

#techSumBox{

    display: inline-block;
    float:left;
    width:30%;
    background-color:#EAF2D3;
    line-height:17px;
    padding:4px;
    height:406px;
    overflow:scroll;
    border:1px solid black;
    overflow:auto;
}

#escalationBox{

    margin-top:16px;
    display: inline-block;
    float:right; 
    width:18%;
    border:1px solid black;
    background-color:#E9EBA9;
    line-height:17px;
    border-radius:5px;  
    padding:4px;
}

#workaroundBox{
   display: inline-block;
   float:left;
   width:40%;
   background-color:#EAF2D3;
   line-height:17px;
   padding:3px;
   height:198px;
   overflow:scroll;
   margin-top:6px;  
}

感谢帮助。谢谢！

编辑1 ：以为我会告诉您，如果我将techSumBox div的高度更改为与custExpBox相同的大小，则会根据需要显示。问题是当高度大于custExpBox div。

时

Answer 1

你应该做的是考虑将左侧列中堆叠的两个元素包装在它们自己的div中。确保包装div具有适当的宽度定义。然后删除浮点数并将每个包含div的内容定义为内联块。接下来，确保右侧两列垂直对齐顶部。

这可能就是你所追求的：http://jsfiddle.net/y75Fc/

HTML：

<div id="middle">
 <div id="custworkHolder">
  <div id="custExpBox">1</div>
  <div id="workaroundBox">2</div> 
 </div>
 <div id="techSumBox">3</div>
 <div id="escalationBox">4</div>
</div>

的CSS：

#middle{
 width:100%;
 margin-top:16px;
 margin-bottom: 5px;
 border:1px dashed black;
}

#custworkHolder
{
 width:40%;
 display:inline-block;
}

#custExpBox{
 background-color:#EAF2D3;
 line-height:17px;
 padding:3px;
 height:200px;
 overflow:scroll;
}

#workaroundBox{
 background-color:#EAF2D3;
 line-height:17px;
 padding:3px;
 height:198px;
 overflow:scroll;
 margin-top:6px;  
}

#techSumBox{
 vertical-align:top;
 display:inline-block;
 width:30%;
 background-color:#EAF2D3;
 line-height:17px;
 padding:4px;
 height:406px;
 overflow:scroll;
 border:1px solid black;
 overflow:auto;
}

#escalationBox{
 vertical-align:top;
 display:inline-block;
 margin-top:16px;
 width:18%;
 border:1px solid black;
 background-color:#E9EBA9;
 line-height:17px;
 border-radius:5px;  
 padding:4px;
}

Answer 2

所有元素都浮动到左边，workaroudbox是最后一个元素，因此当它包裹它时，它将自己定位在底部，预期的行为。可以把它想象为将它们堆叠在另一个上面的左边，无论高度如何，它们都不能重叠。这里有fiddle。我刚刚添加了#dummy div并将其浮动到左侧。

更新

New fiddle

新更新

代码：

HTML：

    <div id="middle">
        <div id="dummy">            
            <div id="custExpBox"></div>          
            <div id="workaroundBox"> </div>
        </div>
        <div id="techSumBox">  </div>
        <div id="escalationBox"> </div>
    </div>

CSS：

    #dummy{float:left;}

    #middle{
        width:100%;
        margin-top:16px;
        margin-bottom: 5px;
        display:inline-block;
        border:1px dashed black;
    }
    #custExpBox{
        display: inline-block;
        float:left;
        width:80px;
        background-color:#EAF2D3;
        line-height:17px;
        padding:3px;
        height:100px;
        overflow:scroll;
        background-color: red;
    }
    #techSumBox{
        display: inline-block;
        float:left;
        width:80px;
        background-color:#EAF2D3;
        line-height:17px;
        padding:4px;
        height:180px;
        overflow:scroll;
        border:1px solid black;
        overflow:auto;
        background-color: blue;
    }
    #escalationBox{
        display: inline-block;
        float:left; 
        width:40px;
        height: 60px;
        border:1px solid black;
        background-color:#E9EBA9;
        padding:4px;
        background-color: green;
    }
    #workaroundBox{
       display: inline-block;
       float:left;
       width:80px;
       background-color:#EAF2D3;
       line-height:17px;
       padding:3px;
       height:50px;
       overflow:scroll;
       background-color: cyan;
       clear: both;
    }

Answer 3

编辑1

This solution不需要包装器div。也许这对你来说会更好。

只需要重新排列HTML并更新CSS。

HTML

<div id="middle">
    <div id="escalationBox">escalationBox</div>
    <div id="custExpBox">custExpBox</div>
    <div id="workaroundBox">workaroundBox</div>    
    <div id="techSumBox">techSumBox</div>
</div>

CSS

#middle{

    width:100%;
    margin-top:16px;
    margin-bottom: 5px;
    display:inline-block;
    border:1px dashed black;
}

#custExpBox{

    display: inline-block;
    float:left;
    width:40%;
    background-color:#EAF2D3;
    line-height:17px;
    padding:3px;
    height:50px;
    overflow:scroll;

}

#techSumBox{

    width:30%;
    background-color:#EAF2D3;
    line-height:17px;
    padding:4px;
    height:300px;
    overflow:scroll;
    border:1px solid black;
    overflow:auto;
}


#escalationBox{

    margin-top:16px;
    float:right;
    width:18%;
    border:1px solid black;
    background-color:#E9EBA9;
    line-height:17px;
    border-radius:5px;  
    padding:4px;
}

#workaroundBox{
   display: inline-block;
   float:left;
   clear:left;
   width:40%;
   background-color:#EAF2D3;
   line-height:17px;
   padding:3px;
   height:198px;
   overflow:scroll;
   margin-top:6px;  
}

编辑0

此updated example类似于您的ascii示例。两个左边的div只需要width:100%;来跨越已经放置的左div容器。

如果组合左侧的两个div，则可以获得所需的结果。例如：http://jsfiddle.net/HFPF9/。

所以，一个包含两个左div的新div：

HTML

<div id="Left">
    <div id="custExpBox">custExpBox</div>          
    <div id="workaroundBox">workaroundBox </div>        
</div>

CSS

#Left {
    float:left;
    width:40%;
}

然后workaroundBox需要clear: left;才能正确堆叠。

所有代码

HTML

<div id="middle">
    <div id="custworkHolder">
        <div id="custExpBox">1</div>
         <div id="workaroundBox">2</div> 
    </div>
    <div id="techSumBox">3</div>
    <div id="escalationBox">4</div>
</div>

CSS

#middle{
    width:100%;
    margin-top:16px;
    margin-bottom: 5px;
    display:inline-block;
    border:1px dashed black;
}

#Left {
    float:left;
    width:40%;
}

#custExpBox{
    display: inline-block;
    float:left;
    width:100%;
    background-color:#EAF2D3;
    line-height:17px;
    padding:3px;
    height:200px;
    overflow:scroll;
}


#techSumBox{
    display: inline-block;
    float:left;
    width:30%;
    background-color:#EAF2D3;
    line-height:17px;
    padding:4px;
    height:406px;
    overflow:scroll;
    border:1px solid black;
    overflow:auto;
}


#escalationBox{

    margin-top:0px;
    display: inline-block;
    float:right; 
    width:25%;
    border:1px solid black;
    background-color:#E9EBA9;
    line-height:17px;
    border-radius:5px;  
    padding:4px;
}

#workaroundBox{
   display: inline-block;
   float:left;
   clear: left;
   width:100%;
   background-color:#EAF2D3;
   line-height:17px;
   padding:3px;
   height:198px;
   overflow:scroll;
   margin-top:6px;  
}

Answer 4

包装浮动divs的最简单的解决方案。看看this Fiddle。

对齐和堆叠div

4 个答案:

更新

新更新