Question

我网站上有3个单选按钮。这些单选按钮是水平对齐的。现在的问题是，我设计了响应式网站，我希望每当屏幕分辨率低于768像素时，单选按钮就会垂直显示。到目前为止，我已经完成了 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 */

div使水平工作

1 个答案: