Question

这可能是一个非常简单的修复，但我似乎无法找到它所以我转向你寻求帮助。此页面：http://www.prvlocksmiths.com.au/company/choosing-prv-locksmiths-for-sydney-commercial-projects调整大小时出现对齐问题，这是由某些链接上的文本太长导致的。这样就可以很好地堆叠图像的布局......好吧......堆叠得不太好。

enter image description here

我该如何解决这个问题？

编辑：这是HTML＆amp; 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

代码，根据示例是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回答的启发我在this fiddle

中删除了对花车的需求

<强> UPDATE2

在回复您的评论时，将li元素的填充更改为padding-bottom:10px;将使列“重叠”（http://jsfiddle.net/FHE65/3/）。就个人而言，一旦你达到图像的大小，我觉得流向一个列更有意义。

在整合您的reszing图像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

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

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

或（如果您不想隐藏任何文字），您可以使用.rowimg将每个inline-block显示为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元素。

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;或其他任何内容

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

5 个答案: