这可能是一个非常简单的修复程序,但我似乎找不到它,所以我向您寻求帮助。本页: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>
最佳答案
简而言之,您有一个左列和一个右列。两列的内容之间不能有任何关系。我会放弃两个包含列的概念,转而使用“行”概念。
查看此 fiddle一个快速而肮脏的例子
根据示例,代码是快速而肮脏的
HTML
<ul class="listcentered">
<li class="rowClear"> <a href="[[~157]]">
<img class="imglist" src="http://www.prvlocksmiths.com.au/img/benefits/keymarking.png" alt="Key Marking"></a>
<p class="txtlist"><a href="[[~157]]">Professional Key Marking</a></p>
</li>
<li class="rowimg"> <a href="[[~156]]"><img class="imglist" src="http://www.prvlocksmiths.com.au/img/benefits/pm7masterkeyingsoftware.png" alt="ProMaster 7 Master Keying Software"></a>
<p class="txtlist"><a href="[[~156]]">PM7 Sydney Master Keying Software</a></p>
</li>
<li class="rowClear"> <a href="[[~158]]">
<img class="imglist" src="http://www.prvlocksmiths.com.au/img/benefits/cylindermarking.png" alt="Cylinder Marking"></a>
<p class="txtlist"><a href="[[~158]]">Professional Cylinder Marking</a></p>
</li>
<li class="rowimg"> <a href="[[~162]]"><img class="imglist" src="http://www.prvlocksmiths.com.au/img/benefits/scecendorsed.png" alt="SCEC Endorsed Locksmiths"></a>
<p
class="txtlist"><a href="[[~162]]">SCEC endorsed Sydney Locksmiths</a>
</p>
</li>
<li class="rowimg rowClear"> <a href="[[~161]]"><img class="imglist" src="http://www.prvlocksmiths.com.au/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>
</li>
<li > <a href="[[~159]]">
<img class="imglist" src="http://www.prvlocksmiths.com.au/img/benefits/keyterminalreseller.png" alt="Key Terminal Reseller"></a>
<p class="txtlist"><a href="[[~159]]">Sydney Locksmith reseller for Keyterminal</a></p>
</li>
<li class="rowimg rowClear"> <a href="[[~160]]">
<img class="imglist" src="http://www.prvlocksmiths.com.au/img/benefits/autojobdispatch.png" alt="Automatic Job Dispatch"></a>
<p class="txtlist"><a href="[[~160]]">Automated Job Dispatch System</a></p>
</li>
<li class="rowimg"> <a href="[[~163]]"><img class="imglist" src="http://www.prvlocksmiths.com.au/img/benefits/automatickeymachines.png" alt="Automatic keying machines"></a>
<p
class="txtlist"><a href="[[~163]]">15 Staff and 8 Mobile Workshops</a>
</p>
</li>
</ul>
CSS
ul {
position:relative
}
li
{
float:left;
width:47%;
font-size:1.3em;
padding:10px;
}
.rowClear
{
clear:both;
}
这应该足以让您继续前进。您需要根据您的要求调整 li
宽度和填充。 Firebug将成为你的 friend 。
更新
受 powerbouys 回答的启发,我删除了 this fiddle 中对 float 的需求。
更新2
为回应您的评论,将 li
元素的填充更改为 padding-bottom:10px;
将使列“重叠”( http://jsfiddle.net/FHE65/3/ ) .不过我个人认为,一旦您达到图像的大小,就更适合一栏。
合并调整后的图像 CSS 现在应该可以完全满足您的需要 (http://jsfiddle.net/FHE65/5/) .一旦达到最长单个单词的宽度,它将转到一列。
关于html - CSS:如何防止文本对布局造成严重破坏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14330300/