在float元素中使用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，将右侧的元素包装到另一个中。

这样，您的#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 2

如果你包装div并删除white-space：pre-line，我想你会得到你想要的东西。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>