div元素中的float：left和float：right意外對齊

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 。

這樣一來，你的#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，輸出

Answer 2

如果包裝div並刪除white-space：pre-line，我想您將找到您想要的。

 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 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>