これはおそらく非常に簡単な修正ですが、私はそれを見つけることができないようですので、あなたに助けを求めています. このページ: http://www.prvlocksmiths.com.au/company/choosing-prv-locksmiths-for-sydney-commercial-projectsサイズを縮小すると配置の問題が発生し、一部のテキストが長すぎることが原因です。リンク。これにより、きれいに積み重ねられた画像のレイアウトが..うまく..うまく積み重ねられなくなります。
どうすればこれを修正できますか?
編集：ここにHTMLとCSSがあります
CSS:
#benimg {
overflow:hidden;
}
.listleft {
float: left;
width: 50%;
}
.listright {
float: left;
width: 50%;
}
.listcentered {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.rowimg {
display: block;
clear: left;
}
.imglist {
width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
.txtlist{
text-align: center;
font-size: 95%;
padding-bottom: 10px;
}
HTML:
<div id="benimg">
<div class="listcentered">
<div class="listleft">
<div class="rowimg">
<a href="[[~157]]">
<img class="imglist" src="img/benefits/keymarking.png" alt="Key Marking"></a>
<p class="txtlist"><a href="[[~157]]">Professional Key Marking</a>
</p>
</div>
<div class="rowimg">
<a href="[[~158]]">
<img class="imglist" src="img/benefits/cylindermarking.png" alt="Cylinder Marking"></a>
<p class="txtlist"><a href="[[~158]]">Professional Cylinder Marking</a>
</p>
</div>
<div class="rowimg">
<a href="[[~159]]">
<img class="imglist" src="img/benefits/keyterminalreseller.png" alt="Key Terminal Reseller"></a>
<p class="txtlist"><a href="[[~159]]">Sydney Locksmith reseller for Keyterminal</a>
</p>
</div>
<div class="rowimg">
<a href="[[~160]]">
<img class="imglist" src="img/benefits/autojobdispatch.png" alt="Automatic Job Dispatch"></a>
<p class="txtlist"><a href="[[~160]]">Automated Job Dispatch System</a>
</p>
</div>
</div>
<div class="listright">
<div class="rowimg">
<a href="[[~156]]"><img class="imglist" src="img/benefits/pm7masterkeyingsoftware.png" alt="ProMaster 7 Master Keying Software"></a>
<p class="txtlist"><a href="[[~156]]">PM7 Sydney Master Keying Software</a>
</p>
</div>
<div class="rowimg">
<a href="[[~161]]"><img class="imglist" src="img/benefits/staffworkshops.png" alt="15 Staff and 8 Mobile Workshops"></a>
<p class="txtlist"><a href="[[~161]]">Automatic key machines in all Sydney Workshops</a>
</p>
</div>
<div class="rowimg">
<a href="[[~162]]"><img class="imglist" src="img/benefits/scecendorsed.png" alt="SCEC Endorsed Locksmiths"></a>
<p class="txtlist"><a href="[[~162]]">SCEC endorsed Sydney Locksmiths</a>
</p>
</div>
<div class="rowimg">
<a href="[[~163]]"><img class="imglist" src="img/benefits/automatickeymachines.png" alt="Automatic keying machines"></a>
<p class="txtlist"><a href="[[~163]]">15 Staff and 8 Mobile Workshops</a>
</p>
</div>
</div>
</div>
</div>