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

概括地說，您有一個左列和一個右列。 兩列的內容之間沒有關系。 我將放棄兩個包含列的概念，而改用“行”概念。

看到這個小提琴為快速和骯臟的例子

根據示例，該代碼是“快速和骯臟”

的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答案的啟發，我消除了這種提琴中對浮子的需求

更新2

為了回應您的評論，請將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>

即使文本顯示為“ This is li ...”，當將鼠標懸停在其上時，您的用戶也將能夠看到全文。

Answer 3

您可以像某些人建議的那樣使用text-overflow ：

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

或者 （如果您不想隱藏任何文本），則可以將每個.rowimg顯示為帶有vertical-align: top 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 4

嘗試這個：

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

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

}

Answer 5

只需將divs設置為固定高度

height:300px; 或任何可能