CSS：我如何避免文本在佈局上造成嚴重破壞？

Question

這可能是一個非常簡單的修復，但我似乎無法找到它，所以我轉向你尋求幫助。此頁面：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> 

Answer 1

概括地說你有左列和右列。這兩列的內容之間可能沒有關係。我會放棄兩個包含列的概念，並改爲使用「行」概念。

一個快速和骯髒的例子

代碼中看到這個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將成爲你的朋友。

更新

通過powerbouys啓發答案我已經刪除了彩車需要在this fiddle

UPDATE2

在回答您的意見，改變li元素的填充，以padding-bottom:10px;將啓用列「重疊」（http://jsfiddle.net/FHE65/3/）。就個人而言，儘管我認爲一旦達到圖像大小，流向一列就更有意義。

在合併您的放大圖像後，CSS現在應該完全按照您的需要來做 (http://jsfiddle.net/FHE65/5/)。一旦你達到最長的單個單詞的寬度，它會轉到一列。

Answer 2

添加以下你的CSS應該解決的問題：

.txtlist > a { 
    width: 100%; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    display: block; 
} 

以上將僅顯示鏈接中帶有尾部省略號的文本行，以防更多文本（當您縮小瀏覽器大小時）。如果您將<a>的title屬性填充爲文本，則當其他人懸停時，它將顯示爲工具提示。

即<a href="..." title="This is the link text">This is the link text</a>

即使文字顯示爲「這是李...」，盤旋在它時，您的用戶將能夠看到全文。

Answer 3

試試這個：

.txtlist{ 
    text-align: center; 
    font-size: 95%; 
    padding-bottom: 10px; 

    /* Add this css */ 
    text-overflow: ellipsis; 
    white-space: nowrap; 

} 

Answer 4

你可以使用text-overflow像有些人建議：

.txtlist { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

或者（如果你不想隱瞞任何文本），你可以用vertical-align: top顯示每個.rowimg作爲inline-block。

這裏是改變CSS：

.rowimg { 
/* display: block; 
    clear: left; */ 

    width: 45%; /* You might wanna play around with this as well as margin */ 
    display: inline-block; 
    vertical-align: top; 
} 

而且你還必須從你的HTML刪除您div.listleft和div.listright元素。

Answer 5

只需設置一個固定高度的divs

height:300px;或不管它可能是