Question

希望在100％repsonsive 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中设置一个“min-width”，以确保总是最小的，我看到很多网站看起来很傻，没有最小宽度的某些东西。

<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/

Answer 2

这可以很容易地用浮子或内联块完成，尽管干净的新的＆＃39;方式是与Flexbox。假设您不需要IE的支持＆lt; 10：

.mydownloads {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start; /* Change this to 'stretch' if you also want full height */
}

.warrantybook,
.brochurebook {
    flex-grow: 1;
    height: 50px;
}

.warrantybook {
    background:red;
}

.brochurebook {
    background:blue;
}

https://jsfiddle.net/gn6jabb9/1/

在100％div中并排安装2个div

2 个答案: