css - 对齐和堆叠 div

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 定义为 inline-block。接下来，确保右侧的两列与顶部垂直对齐。

这可能是你所追求的：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;
}

​</p>

Answer 2

所有元素都浮动到左侧并且workaroudbox是最后一个元素，因此当它包装时，它会将自身定位在底部，这是预期的行为。可以将其想象为将它们堆叠在另一个顶部的左侧，无论高度如何，它们都不能重叠。在这里你有小提琴。我刚刚添加了#dummydiv 并将其浮动到左侧。

更新

新小提琴。

新更新

代码：

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

此解决方案不需要包装器 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

这个更新的示例类似于您的 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. 看看这个 Fiddle。