html - 在 100% div 中并排安装 2 个 div

Question

希望在 100% 响应的 div 中放置 2 个水平 div。当屏幕缩小/增大时，2 个内部 div 是否会调整大小。

<div class="mydownloads">
<div class="warrantybook"><a href="http://www.example.com/link1"></a></div>
<div class="brochurebook"><a href="http://www.example.com/link2"></a></div>
</div>

.mydownloads {
width:100%;
}

.warrantybook {
padding:10px;
float:left;
display: inline-block;
margin-left: auto;
margin-right: auto;
width:45%;
}
.brochurebook {
padding:10px;
float:right;
display: inline-block;
margin-left: auto;
margin-right: auto;
width:45%;
}

Answer 1

您想将整个 div 设置为 100%，将 2 个内部 div 设置为 50%，并删除所有填充、边框和边距。我建议在 css 中设置一个“最小宽度”以确保始终有一个最小值，我看到很多网站在某些方面没有最小宽度看起来很愚蠢。

<div class="mydownloads">
<div class="warrantybook"><a href="http://www.example.com/link1"></a></div>
<div class="brochurebook"><a href="http://www.example.com/link2"></a></div>
</div>
.mydownloads {
    width:100%;
}

.warrantybook {
    padding:0;
    margin:0;
    border:0;
    float:left;
    width:50%;
    background:red;
    height:50px;
}
.brochurebook {
    padding:0;
    margin:0;
    border:0;
    float:right;
    width:50%;
    background:blue;
    height:50px;
}

https://jsfiddle.net/gn6jabb9/