html - 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>

score 2 · Accepted Answer

简而言之，您有一个左列和一个右列。两列的内容之间不能有任何关系。我会放弃两个包含列的概念，而改用“行”概念。

请参阅此小提琴以获取快速而肮脏的示例

代码，根据示例是 Quick and Dirty

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/)。一旦您达到最长单个单词的宽度，它将转到一列。

score 1 · Accepted Answer

将以下内容添加到您的 CSS 应该可以解决此问题：

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

以上将仅显示链接中的文本行，以防有更多文本（当您缩小浏览器时）。如果你渲染<a>它的title 属性也填充了文本，当有人将鼠标悬停在它上面时，它将显示为工具提示。

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

即使文本显示为“This is the li...”，当将鼠标悬停在它上面时，您的用户也将能够看到全文。

score 1 · Accepted Answer

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

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

或者（如果您不想隐藏任何文本），您可以将每个文本显示.rowimg为inline-blockwith vertical-align: top。

这是更改后的 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元素。

score 0 · Accepted Answer

试试这个：

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

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

}

score -1 · Accepted Answer

-1

只需将固定高度设置为divs

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

于 2013-01-15T03:28:35.113 回答

html - CSS：如何防止文本对布局造成严重破坏？

5 回答 5

Related

Reference