在DIV後面的行中創建DIV，留下浮點數

Question

我有一個div與另外兩個div，其中float：left;屬性。我想用下一個div來進入新行。

我試圖把寬度：100％;在兩個divs中，但沒有任何變化。

這是我的代碼：

HTML

<div style="width: 100%;"> 
<div class="img-head"> 
    <img src="/nutickets2/images/evento-1.png"> 
</div> 
<div class="text-head-div"> 
    <span class="text-head">HYPER Festival LAUNCH PARTY</span><br><br><br> 

     <table class="table-1"> 
      <tr> 
       <th>Name:</th> 
       <td>Bill Gates</td> 
       <th>Name:</th> 
       <td>Steve Jobs</td> 
      </tr> 
      <tr> 
       <th>Telephone:</th> 
       <td>55577854</td> 
       <th>Telephone:</th> 
       <td>55577854</td> 
      </tr> 
     </table> 
</div> 
</div> 

<div style="width: 100;"> 
    <div>NEXT DIV TESTTTTTTT</div> 
</div> 

CSS

.img-head { 
    float: left; 
    margin: 10px; 
} 

.text-head-div { 
    float: left; 
    margin-top: 35px; 
    margin-left: 20px; 
} 

.text-head { 
    color: #0099cc; 
} 

.text-head-1 { 
    color: #000000; 
} 

.text-head-2 { 
    color: #000000; 
} 

.table-1 th, td { 
    text-align: left; 
    padding: 19px; 
} 

Answer 1

使用clear:both;。這將迫使元素下降。另請注意，當您指定寬度屬性時，必須提及該單位。

<div style="width:100px; clear:both;"> 
    <div>NEXT DIV TESTTTTTTT</div> 
</div> 

Answer 2

添加clear: left到第二DIV，這就足夠了（它中斷浮動）

Answer 3

嘗試這樣

.img-head { 
 
    float: left; 
 
    margin: 10px; 
 
} 
 

 
.text-head-div { 
 
    float: left; 
 
    margin-top: 35px; 
 
    margin-left: 20px; 
 
} 
 

 
.text-head { 
 
    color: #0099cc; 
 
} 
 

 
.text-head-1 { 
 
    color: #000000; 
 
} 
 

 
.text-head-2 { 
 
    color: #000000; 
 
} 
 

 
.table-1 th, td { 
 
    text-align: left; 
 
    padding: 19px; 
 
} 
 
.first:after { 
 
    content: ""; 
 
    display: block; 
 
    clear: both; 
 
}

<div class="first" style="width: 100%;"> 
 
<div class="img-head"> 
 
    <img src="/nutickets2/images/evento-1.png"> 
 
</div> 
 
<div class="text-head-div"> 
 
    <span class="text-head">HYPER Festival LAUNCH PARTY</span><br><br><br> 
 

 
     <table class="table-1"> 
 
      <tr> 
 
       <th>Name:</th> 
 
       <td>Bill Gates</td> 
 
       <th>Name:</th> 
 
       <td>Steve Jobs</td> 
 
      </tr> 
 
      <tr> 
 
       <th>Telephone:</th> 
 
       <td>55577854</td> 
 
       <th>Telephone:</th> 
 
       <td>55577854</td> 
 
      </tr> 
 
     </table> 
 
</div> 
 
</div> 
 

 
<div class="next"> 
 
    <div>NEXT DIV TESTTTTTTT</div> 
 
</div>