Question

在我的下方，我在一个名为divs的主要div中添加两个block，并在左边和右边安排一个。我正在为主div block设置边框

但我面临的问题是，当屏幕尺寸低于300px时，两个子div将逐个排列，但边框未正确对齐。边界不完全覆盖两个孩子divs。如何解决这个边界问题。

另一个问题是，此代码在IE中不起作用（使用IE11检查）。什么参数我必须添加\修改与IE

一起工作

HTML：

<!DOCTYPE html>
<html>
<body>
    <div class="block">
        <div class="input-quest">Your devices are sequential ?</div>
        <div class="input-resp">
            <input type="radio" name="button" value="Yes" /><label>Yes</label>
            <input type="radio" name="button" value="No"  /><label>No</label>
        </div>
    </div>

<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</body>
</html>

CSS：

.block {
width: inherit;
width: 96%; 
max-width: 700px;
margin: auto;
border-style:solid;
border-width:2px;
border-color:#ddd;
height:20%;
padding:1%;

}
.input-quest {
width: 60%;
float:left;
}
.input-resp {
width: 40%;
text-align: center;
float:right;
}

@media (max-width:300px) {

.input-resp {
background-color:red;
width: 100%;
float:left;
text-align:left;
}

.input-quest {
background-color:green;
width: 100%;
float:left;
text-align:left;
}

}

Answer 1

您的height div上的20px设置为.block。因此，您需要在@media调用中将其删除或设置新的height。您还应该清除主CSS中的部分floats，然后在@media查询中将其删除。

查看更新后的jsfiddle：http://jsfiddle.net/XYMtx/1/

CSS中的@media查询问题与响应式设计

1 个答案: