在我的下面，我在一个名为 block 的主 div 中添加了两个 div 并在左边安排了一个，在右边安排了另一个。我正在为主 div 添加一个边框div block
但我这里面临的问题是，当屏幕尺寸小于 300px 时，两个子 div 会一一排列，但边框没有正确对齐。边框未完全覆盖两个子 div。如何解决这个边界问题。
另一个问题是，此代码在 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;
}
}
最佳答案
您在 .block div 上将 height 设置为 20px。因此，您需要在 @media 调用中删除它或设置新的 height。您还应该清除主 CSS 中的一些 floats 并在 @media 查询中删除它们。
查看更新后的 jsfiddle:http://jsfiddle.net/XYMtx/1/
关于css - 具有响应式设计的 CSS 中的@media 查询问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20434649/