Question

我正在我的CSS中创建一个特定于移动屏幕的样式集。

HTML

<div id="rowlinks">
   <div class="rlleft">
          <div class="rllefta"> 
            <a href=""></a>
            <a href=""></a>
         </div>

       <div class="rlleftb">
            <a href=""></a>
            <a href=""></a>
       </div>
 </div>

    <div class="rlright">
        <div class="rlrighta">
            <a href=""></a>
            <a href=""></a>
      </div>

       <div class="rlrightb">
            <a href=""></a>
            <a href=""></a>
       </div>

    </div>
    <div style="clear:both"></div>
</div>

CSS

#rowlinks{clear:both;padding:10px;background-color:whitesmoke;margin-top:10px;border:1px solid grey;border-style:outset}
#rowlinks a{color:black;text-decoration:none;font-size:16px}

 .rlleft{width:45%;float:left;}
   .rllefta{float:left;width:45%;padding:10px;}
   .rlleftb{float:right;width:45%;padding:10px;}

.rlright{width:45%;float:right;}
   .rlrighta{float:left;width:45%;padding:10px;}
   .rlrightb{float:right;width:45%;padding:10px;}

@media only screen and (max-width: 1024px) {

    #rowlinks{clear:both;width:95%;margin:0px auto;}
    #rowlinks div{clear:both;width:95%;margin:0px auto;border:1px solid maroon}
    #rowlinks a{clear:both;margin:0 auto;font-size:16px;;width:80%}

 }

现在我的问题是，

虽然所有的div在桌面和更大的屏幕上水平完美，但在移动布局上，如我所示，我希望它以对称方式堆叠在另一个之下。我已经使用了清除：两者都用于清除浮子。但是，它不会清除浮子，也不会将浮动堆叠在另一个之下。

我做错了什么？

Answer 1

如果您要删除float: left，请添加float: none。 Float: none删除所有花车。

无法清除响应式CSS中的浮动

1 个答案: