使用float：left放置div
[英]Placing divs using float:left
问题描述
不幸的是，左浮动不起作用
我搜索了但没有找到解决方案。 我的意图是将最后一个框放在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>
1 个解决方案
解决方案1
0 2016-12-16 14:56:37
您已经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>
同一行上的多个div，而未在每个元素上使用float：left
[英]Multiple divs on same line without using float:left on each element
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.