使用float放置div:left

时间:2016-12-16 14:52:23

标签: html css

不幸的是,左派不起作用

我搜索但未找到解决方案。我的目的是将最后一个方框放在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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分: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>