2

質問の表現が正しくない、または明確でない場合は、お詫び申し上げます。説明させてください。

真ん中の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と同じサイズに変更すると、希望どおりに表示されることをお知らせします。問題は、高さがcustExpBoxdivよりも大きい場合です。

4

4 に答える 4

2

あなたがすべきことは、左の列に積み重ねられている2つの要素をそれぞれのdivでラップすることを検討することです。ラッピングdivに適切な幅の定義があることを確認してください。次に、フロートを削除し、divを含む各フロートをインラインブロックとして定義します。次に、右側の2つの列が上に垂直に配置されていることを確認します。

これはおそらくあなたが求めているものです：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>

于 2012-12-13T01:01:10.073 に答える
1

すべての要素は左にフロートされ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;
    }​
于 2012-12-13T00:48:28.363 に答える
0

編集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の例に似ています。width:100%;左側の2つのdivは、左側のdivコンテナ全体にまたがる必要があります。

左側の2つのdivを組み合わせると、目的の結果を得ることができます。ここでの例：http：//jsfiddle.net/HFPF9/。

したがって、2つの左側の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;  
}​
于 2012-12-13T00:42:40.800 に答える
0

フロートをラップするのが最も簡単な解決策divsです。このフィドルを見てください。

于 2012-12-13T00:45:57.533 に答える