所以我正在开发这个网站,客户想要蜂窝模式,如下所示:http://27.121.66.1/~scsc1126/test.html
在常规模式下,它看起来是我想要的,但在响应模式下,第二组向右偏移,而不是六边形整齐地叠在一起。我不知道为什么。我相信这很简单,但我想不通。
这是代码:
.icon-row-1 {
position: relative;
clear: both;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
width: 90%;
}
.icon-row-2 {
float: none;
position: relative;
clear: both;
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
width: 60%;
}
<div class="container">
<h1> COMPETITIONS </h1>
<p> </p>
<div class="row text-center">
<div class="icon-row-1">
<div class="col-md-4"><a href="http://schools.raci.org.au/wp/beta/competition/crystal-growing/">
<h2> Titration </h2>
<img alt="titration" src="http://schools.raci.org.au/wp/beta/wp-content/uploads/2014/03/titration.png"/></a></div>
<div class="col-md-4"><a href="http://schools.raci.org.au/wp/beta/competition/crystal-growing/">
<h2> Crystal Growing </h2>
<img alt="crystal growing" src="http://schools.raci.org.au/wp/beta/wp-content/uploads/2014/03/crystal-growing.png"/></a></div>
<div class="col-md-4"><a href="http://schools.raci.org.au/wp/beta/competition/ancq/">
<h2> ANCQ </h2>
<img alt="ancq" src="http://schools.raci.org.au/wp/beta/wp-content/uploads/2014/03/ancq.png"></a></div>
</div>
</div>
<div class="row text-center">
<div class="icon-row-2">
<div class="col-md-6"> <a href="http://schools.raci.org.au/wp/beta/store/"><img alt="store" class="alignnone wp-image-42 size-full" height="347" src="http://schools.raci.org.au/wp/beta/wp-content/uploads/2014/03/store.png" width="301" />
<h2> Visit the Store </h2>
</a></div>
<div class="col-md-6"> <a href="http://schools.raci.org.au/wp/beta/other-initiatives/"><img alt="other-initiatives" class="alignnone wp-image-1123 size-full" height="347" src="http://schools.raci.org.au/wp/beta/wp-content/uploads/2014/03/other-initiatives.png" width="301" />
<h2> Other Initiatives </h2>
</a></div>
</div>
</div>
</div>
我做错了什么???它把我逼疯了。
img{max-width: 100%; height: auto;}
.icon-row-1 {
position: relative;
clear: both;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
width: 90%;
}
.icon-row-2 {
float: none;
position: relative;
clear: both;
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
width: 60%;
}
<div class="container">
<h1> COMPETITIONS </h1>
<p> </p>
<div class="row text-center">
<div class="icon-row-1">
<div class="col-md-4"><a href="http://schools.raci.org.au/wp/beta/competition/crystal-growing/">
<h2> Titration </h2>
<img alt="titration" src="http://schools.raci.org.au/wp/beta/wp-content/uploads/2014/03/titration.png"/></a></div>
<div class="col-md-4"><a href="http://schools.raci.org.au/wp/beta/competition/crystal-growing/">
<h2> Crystal Growing </h2>
<img alt="crystal growing" src="http://schools.raci.org.au/wp/beta/wp-content/uploads/2014/03/crystal-growing.png"/></a></div>
<div class="col-md-4"><a href="http://schools.raci.org.au/wp/beta/competition/ancq/">
<h2> ANCQ </h2>
<img alt="ancq" src="http://schools.raci.org.au/wp/beta/wp-content/uploads/2014/03/ancq.png"></a></div>
</div>
</div>
<div class="row text-center">
<div class="icon-row-2">
<div class="col-md-6"> <a href="http://schools.raci.org.au/wp/beta/store/"><img alt="store" class="alignnone wp-image-42 size-full" height="347" src="http://schools.raci.org.au/wp/beta/wp-content/uploads/2014/03/store.png" width="301" />
<h2> Visit the Store </h2>
</a></div>
<div class="col-md-6"> <a href="http://schools.raci.org.au/wp/beta/other-initiatives/"><img alt="other-initiatives" class="alignnone wp-image-1123 size-full" height="347" src="http://schools.raci.org.au/wp/beta/wp-content/uploads/2014/03/other-initiatives.png" width="301" />
<h2> Other Initiatives </h2>
</a></div>
</div>
</div>
</div>
添加此CSS
img {
height: auto;
max-width: 100%;
}
看看jsfiddle
添加此css:
img {
height: auto;
max-width: 100%;
}