與浮動意外對齊：左和浮動：右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

您需要從左側的元素包裝成一個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>