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,则所有将要发生的元素都不会使用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 */