浮動小数点との予期しないアラインメント：leftとfloat：div要素の右

Question

解決方法がわからない問題が発生しています。

この

は私が取得していた結果である：

そして、これは望ましい結果である：（クイックワイヤフレーム）

htmlコード：

<div id="fileOutput"> 
    <h2><center>DASHBOARD</center></h2> 
    <div id="tittletextbox1"><img src="images/computer.png" style="vertical-align: middle;"> Basics</div> 
    <div id="textbox1"></div> 
    <div id="tittletextbox2"><img src="images/network.png" style="vertical-align: middle;"> Networking</div> 
    <div id="textbox2"></div> 
</div> 

両方のテキストボックスにはJavaScriptオブジェクトが埋め込まれています。

CSS：

div#fileOutput{ 
    margin: auto; 
    margin-top: 50px; 
    margin-left: 250px; 
    margin-right: 50px; 
    margin-bottom: 50px; 
    display:block; 
    overflow:auto; 
    white-space: pre-line; 
    border: solid 1px black; 
    padding: 5px; 
} 

div#tittletextbox1{ 
    float:left; 
    width: 40%; 
} 

div#tittletextbox2{ 
    float:right; 
    width: 40%; 
} 

div#textbox1{ 
    float:left; 
    width: 40%; 
    border: 1px solid black;   
} 

div#textbox2{ 
    float:right; 
    width: 40%; 
    border: 1px solid black;   
} 

Answer 1

あなたはdivタグをラップし、空白削除する場合：前の行を、私はあなたがあなたが何を持っているだろうと思います探している。

div#fileOutput{ 
 
    margin: auto; 
 
    margin-top: 50px; 
 
    margin-left: 250px; 
 
    margin-right: 50px; 
 
    margin-bottom: 50px; 
 
    display:block; 
 
    overflow:auto; 
 
    border: solid 1px black; 
 
    padding: 5px; 
 
} 
 

 
div#tittletextbox1{ 
 
    float:left; 
 
    width: 40%; 
 
} 
 

 
div#tittletextbox2{ 
 
    float:right; 
 
    width: 40%; 
 
} 
 

 
div#textbox1{ 
 
    float:left; 
 
    width: 40%; 
 
    border: 1px solid black;   
 
} 
 

 
div#textbox2{ 
 
    float:right; 
 
    width: 40%; 
 
    border: 1px solid black;   
 
}

<div id="fileOutput"> 
 
    <h2><center>DASHBOARD</center></h2> 
 
    <div> 
 
     <div id="tittletextbox1"><img src="images/computer.png" style="vertical-align: middle;"> Basics</div> 
 
     <div id="tittletextbox2"><img src="images/network.png" style="vertical-align: middle;"> Networking</div> 
 
    </div> 
 
    <div> 
 
     <div id="textbox1"></div> 
 
     <div id="textbox2"></div> 
 
    </div> 
 
</div>

Answer 2

あなたは1 divに左サイドからの要素をラップする必要があり、他に右からのもの。

このようにして、#textbox1は#tittletextbox1の左に重なり、後者のボックスが画面の80％以下で折りたたまれます。

HTML：

<div id="left-wrapper"> 
    <div id="tittletextbox1"><img src="images/computer.png" style="vertical-align: middle;"> Basics</div> 
    <div id="textbox1"></div> 
    </div> 
    <div id="right-wrapper"> 
    <div id="tittletextbox2"><img src="images/network.png" style="vertical-align: middle;"> Networking</div> 
    <div id="textbox2"></div> 
    </div> 

はCSS：

div#left-wrapper { 
    float:left; 
    width: 40%; 
} 

div#right-wrapper{ 
    float:right; 
    width: 40%; 
    border: 1px solid black;   
} 

https://jsbin.com/qiliyageri/2/edit?html,css,output

Answer 3

一般的には、兄弟要素間のfloatの異なる値を置くことはお勧めできません。 white-spaceプロパティを削除し、divを並べ替えてclearfix divを追加すると、このトリックが実行されました。

div#fileOutput { 
 
    margin: auto; 
 
    margin-top: 50px; 
 
    margin-left: 250px; 
 
    margin-right: 50px; 
 
    margin-bottom: 50px; 
 
    display: block; 
 
    overflow: auto; 
 
    border: solid 1px black; 
 
    padding: 5px; 
 
} 
 
div#tittletextbox1 { 
 
    float: left; 
 
    width: 40%; 
 
} 
 
div#tittletextbox2 { 
 
    float: left; 
 
    width: 40%; 
 
} 
 
div#textbox1 { 
 
    float: left; 
 
    width: 40%; 
 
    border: 1px solid black; 
 
} 
 
div#textbox2 { 
 
    float: left; 
 
    width: 40%; 
 
    border: 1px solid black; 
 
} 
 
.clearfix { 
 
    clear: both; 
 
}

<div id="fileOutput"> 
 
    <h2><center>DASHBOARD</center></h2> 
 
    <div id="tittletextbox1"> 
 
    <img src="images/computer.png" style="vertical-align: middle;">Basics 
 
    </div> 
 
    <div id="tittletextbox2"> 
 
    <img src="images/network.png" style="vertical-align: middle;">Networking 
 
    </div> 
 

 
    <div class="clearfix"></div> 
 
    <div id="textbox1">Text</div> 
 
    <div id="textbox2">Text</div> 
 
</div>