html - 使 div 水平工作

Question

我的网站上有 3 个单选按钮。这些单选按钮水平对齐。现在的问题是，我设计了响应式网站，我希望只要屏幕分辨率小于 768px，单选按钮就可以垂直显示。 我到目前为止所做的是 HTML

<div style="float:left;width:60%;">
                <div class="radio"><input type="radio">Confirm</div>
                <div class="radio"><input type="radio">Not Confirm</div>
                <div class="radio"><input type="radio">Extend</div>
</div>  

CSS

.radio{
   float:left; 
   width:33%;
}

这适用于单选按钮的水平对齐。

但这是我尝试的垂直，它没有响应

@media only screen and (max-width: 768px) {
   .radio{
    width:33%;
 }
}

请帮忙

Answer 1

你需要添加clear:both;

@media only screen and (max-width: 768px) {
   .radio{
    width:33%;
    clear:both;
 }
}

如果使用float left所有会出现的元素就不会使用clear: both;

这个通用的方法

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */