2016-12-16 68 views
0

遺憾的是浮動左不起作用使用浮動配售的div:左

我搜查,但沒有找到一個解決方案。我的意圖是將最後一個盒子放在第2行。我的錯誤在哪裏?請放大至80%,在預覽如果你使用的按鈕 「運行的代碼片斷」

<body leftmargin="0" topmargin="6" marginheight="6" marginwidth="6" align="center" class="main" style="cursor: auto;"> 
 
<div style="position: relative;"> 
 
<div padding="4px" width="150" style="float: left; width: 150px; text-align: center; border: 1px solid black; background-color: white; padding: 4px; margin: 0px 0px 10px 10px; border-radius: 6px;"><table align="left" cellpadding="4" cellspacing="1" text-align="left" style="width: 150%; margin-top: 4px; margin-left: 1px;"> 
 
<tbody> 
 
    <tr> 
 
     <th align="center" colspan="1">Lorem</th> 
 
    </tr> 
 
    <tr> 
 
     <td align="left">Loren <button>Ipsum</button></td> 
 
    </tr> 
 
    <tr> 
 
     <td align="left">Loren <button>Lorem</button></td> 
 
    </tr> 
 
</tbody> 
 
</table> 
 
</div> 
 
<div class="img-rounded" style="float: left; text-align: center; border: 1px solid black; background-color: white; padding: 4px; width: 150px; margin: 0px 0px 10px 10px; border-radius: 6px;"> 
 
<table align="center" cellpadding="5" cellspacing="0" text-align="left"> 
 
    <tbody> 
 
     <tr> 
 
     <th align="center" colspan="6" style="text-align: center;">Lorem ipsum lorem</th> 
 
</tr> 
 
<tr> 
 
    <td><input name="val" type="Radio" value="a">ipsum</td> 
 
    <td><input name="val" type="Radio" value="b">ipsum</td> 
 
</tr> 
 
<tr> 
 
    <td align="center" colspan="6"><button>Lorem</button></td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
</div> 
 
<div class="img-rounded" style="clear: both; text-align: center; border: 1px solid black; background-color: white; padding: 4px; width: 150px; margin: 0px 0px 10px 10px; border-radius: 6px;"><table align="center" cellpadding="12" cellspacing="12" text-align="center" style="margin-top: 3px;"> 
 
<tbody> 
 
    <tr> 
 
     <th align="center" colspan="2" style="text-align: center;">Lorem</th> 
 
</tr> 
 
<tr> 
 
    <td align="left">Lorem Lorem Lorem Lorem Lorem Lorem </td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
</div> 
 
<div style="background-color:lightgreen; clear: both; text-align: center; border: 1px solid black; padding: 4px; width: 150px; margin: 
 
0px 0px 10px 10px; border-radius: 6px;"><table align="center" cellpadding="2" cellspacing="0" text-align="left" style="margin-top: 4px;"> 
 
<tbody> 
 
    <tr> 
 
     <th align="center" colspan="3" style="text-align: center">I want to be in the second row</th> 
 
</tr> 
 
<tr> 
 
    <td><input name="freq_val" type="Radio" value="50">Please</td> 
 
    <td><input name="freq_val" type="Radio" value="60">Help</td> 
 
</tr> 
 
<tr> 
 
    <td align="center" colspan="3"><button>Thank You</button></td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
</div> 
 
<div style="position: absolute; top: 542px; left: 24px; width: 20px; height: 20px; text-align: center; visibility: hidden; background-color: red; border-radius: 6px;"></div> 
 
<div style="position: absolute; top: 542px; left: 60px; width: 600px; height: 20px; text-align: left; visibility: hidden; background-color: white;">infos</div> 
 
<span class="list-group-item" an_id " style="display: none; position: absolute; top: 720px; border: none;"> 
 
</span> 
 
</div> 
 
</body>

+0

* float:left *無效.... I t的CSS錯誤不是你的嗎? – Liam

回答

0

你有一些clear: both;性質放置錯誤,並丟失float: left; :)

<body leftmargin="0" topmargin="6" marginheight="6" marginwidth="6" align="center" class="main" style="cursor: auto;"> 
 
<div style="position: relative;"> 
 
<div padding="4px" width="150" style="float: left; width: 150px; text-align: center; border: 1px solid black; background-color: white; padding: 4px; margin: 0px 0px 10px 10px; border-radius: 6px;"><table align="left" cellpadding="4" cellspacing="1" text-align="left" style="width: 150%; margin-top: 4px; margin-left: 1px;"> 
 
<tbody> 
 
    <tr> 
 
     <th align="center" colspan="1">Lorem</th> 
 
    </tr> 
 
    <tr> 
 
     <td align="left">Loren <button>Ipsum</button></td> 
 
    </tr> 
 
    <tr> 
 
     <td align="left">Loren <button>Lorem</button></td> 
 
    </tr> 
 
</tbody> 
 
</table> 
 
</div> 
 
<div class="img-rounded" style="float: left; text-align: center; border: 1px solid black; background-color: white; padding: 4px; width: 150px; margin: 0px 0px 10px 10px; border-radius: 6px;"> 
 
<table align="center" cellpadding="5" cellspacing="0" text-align="left"> 
 
    <tbody> 
 
     <tr> 
 
     <th align="center" colspan="6" style="text-align: center;">Lorem ipsum lorem</th> 
 
</tr> 
 
<tr> 
 
    <td><input name="val" type="Radio" value="a">ipsum</td> 
 
    <td><input name="val" type="Radio" value="b">ipsum</td> 
 
</tr> 
 
<tr> 
 
    <td align="center" colspan="6"><button>Lorem</button></td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
</div> 
 
<div class="img-rounded" style="clear: both; float: left; text-align: center; border: 1px solid black; background-color: white; padding: 4px; width: 150px; margin: 0px 0px 10px 10px; border-radius: 6px;"><table align="center" cellpadding="12" cellspacing="12" text-align="center" style="margin-top: 3px;"> 
 
<tbody> 
 
    <tr> 
 
     <th align="center" colspan="2" style="text-align: center;">Lorem</th> 
 
</tr> 
 
<tr> 
 
    <td align="left">Lorem Lorem Lorem Lorem Lorem Lorem </td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
</div> 
 
<div style="background-color:lightgreen; float: left; text-align: center; border: 1px solid black; padding: 4px; width: 150px; margin: 
 
0px 0px 10px 10px; border-radius: 6px;"><table align="center" cellpadding="2" cellspacing="0" text-align="left" style="margin-top: 4px;"> 
 
<tbody> 
 
    <tr> 
 
     <th align="center" colspan="3" style="text-align: center">I want to be in the second row</th> 
 
</tr> 
 
<tr> 
 
    <td><input name="freq_val" type="Radio" value="50">Please</td> 
 
    <td><input name="freq_val" type="Radio" value="60">Help</td> 
 
</tr> 
 
<tr> 
 
    <td align="center" colspan="3"><button>Thank You</button></td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
</div> 
 
<div style="position: absolute; top: 542px; left: 24px; width: 20px; height: 20px; text-align: center; visibility: hidden; background-color: red; border-radius: 6px;"></div> 
 
<div style="position: absolute; top: 542px; left: 60px; width: 600px; height: 20px; text-align: left; visibility: hidden; background-color: white;">infos</div> 
 
<span class="list-group-item" an_id " style="display: none; position: absolute; top: 720px; border: none;"> 
 
</span> 
 
</div> 
 
</body>