Question

我已经看到了有关它的问题，但没有正确的答案，所以我再次询问，你在表格单元格中打破内容的解决方案是什么？

我希望我桌子的每个单元格具有相同的边框间距（左/右），因此如果文本内容比单元格的大部分区域更加狂野，那么它就会转到该行。

正如你所看到的那样，新奥尔良比图像更加狂野，而这正在弄乱边界间距。

我对文字max-width:100%这样的话很难，但似乎没有效果。

如果你想稍微玩一下，这是JsFiddle。

只是你有一个想法，代码是非常基本的：

    <div display:table; border-spacing:10px;>
       <span display:table-row;>
          <div display:table-cell;> Content </div>
          <div display:table-cell;> Content </div>
          <div display:table-cell;> Content </div>
          ...
       </span><!-- Every 5 elements -->
       <span display:table-row;>
          <div display:table-cell;> Content </div>  x5
          ...
       </span>
       ...
    </div>

Answer 1

首先，您的HTML无效。 li必须是ul或ol的孩子。

现在，由于所有图像宽度相同（85px），因此您可以指定li（单个块元素）与图像的宽度相同。 li {width: 85px;}。那么你的文字不会扩展父元素。

对于响应式设计：

确保您的图片具有响应能力 - <img class="imgLittle" src="{{URL}}"> / .imgLittle {width: 100%; /* height must be auto */}
为您的街区应用网格系统。

Answer 2

试试你的jsFiddle ......
我更新它只是添加一个新的div，其中包含一个名为text的文本。

我还将图像宽度更改为100％。

HTML：

<ul>
<div class="append">
   <span>
      <li>
         <a href="/voyage/ameriques/etats-unis/boston/">
            <div class="imgLittle" style="background-image:url(http://data4.voyagesarabais.com/i/photos/custom/900/500/5/159431.jpg);">
            </div>
            <div class="text">Boston</div>
         </a>
      </li>
      <li>
         <a href="/voyage/ameriques/etats-unis/chicago/">
            <div class="imgLittle" style="background-image:url(http://www.unbattementdaile.net/wp-content/uploads/2010/04/21-04-2010-23-12-35.png);">
            </div>
            <div class="text">Chicago</div>
         </a>
      </li>
      <li>
         <a href="/voyage/ameriques/etats-unis/las-vegas/">
            <div class="imgLittle" style="background-image:url(http://www.voyage-unique.com/fr/uploads/etats-unis-las-vegas-la-nuit.jpg);">
            </div>
            <div class="text">Las vegas</div>
         </a>
      </li>
      <li>
         <a href="/voyage/ameriques/etats-unis/los-angeles/">
            <div class="imgLittle" style="background-image:url(http://photos.nouvelles-frontieres.fr/Produits/USACT029_Los-Angeles.jpg);">
            </div>
            <div class="text">Los angeles</div>
         </a>
      </li>
      <li>
         <a href="/voyage/ameriques/etats-unis/miami/">
            <div class="imgLittle" style="background-image:url(http://static.mensup.fr/photos/23094/resorts-world-miami.jpg);">
            </div>
            <div class="text">Miami</div>
         </a>
      </li>
   </span>
   <span>
      <li>
         <a href="/voyage/ameriques/etats-unis/new-york/">
            <div class="imgLittle" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/New_York_in_United_States.svg/langfr-280px-New_York_in_United_States.svg.png);">
            </div>
            <div class="text">New york</div>
         </a>
      </li>
      <li>
         <a href="/voyage/ameriques/etats-unis/nouvelle-orleans/">
            <div class="imgLittle" style="background-image:url(http://idata.over-blog.com/1/24/29/79/Nouvelle-Orl-ans-article1/usa-states-and-capital-map.gif);">
            </div>
             <div class="text">Nouvelle orleans</div>
         </a>
      </li>
      <li>
         <a href="/voyage/ameriques/etats-unis/orlando/">
            <div class="imgLittle" style="background-image:url(http://w0.fast-meteo.com/locationmaps/Orlando.8.gif);">
            </div>
            <div class="text">Orlando</div>
         </a>
      </li>
      <li>
         <a href="/voyage/ameriques/etats-unis/phoenix/">
            <div class="imgLittle" style="background-image:url(http://s.tf1.fr/mmdia/i/38/1/carte-des-etats-unis-avec-phoenix-10852381jjngi_1713.jpg?v=1);">
            </div>
            <div class="text">Phoenix</div>
         </a>
      </li>
      <li>
         <a href="/voyage/ameriques/etats-unis/salt-lake-city-/">
            <div class="imgLittle" style="background-image:url(https://images.rapgenius.com/0210fe9d8964c340748ffb8da065f576.511x367x1.jpg);">
            </div>
            <div class="text">Salt lake city </div>
         </a>
      </li>
   </span>
   <span>
      <li>
         <a href="/voyage/ameriques/etats-unis/san-francisco/">
            <div class="imgLittle" style="backgroundimage:url(http://www.quandpartir.com/meteo/images/villes/etats-unis-san-fransisco-300.jpg);">
            </div>
            <div class="text">San francisco</div>
         </a>
      </li>
      <li>
         <a href="/voyage/ameriques/etats-unis/seattle/">
            <div class="imgLittle" style="background-image:url(http://aire-ouest-americaine.e-monsite.com/medias/images/carte-etats-unis-seattle.jpg);">
            </div>
            <div class="text">Seattle</div>
         </a>
      </li>
   </span>
</div>
</ul>

CSS：

.append {
    display: table;
    border-collapse: separate;
    border-spacing:10px;
}

/* One closing and opening span every 5 elements for creating row */
.append span { 
    display: table-row;
}

.append li {
    display: table-cell;
    text-align:center;
}

/* Display images */
.imgLittle {
    width: 100%;
    height: 85px;
    margin: auto;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.text{
    width: 100%; 
    display: -moz-inline-box;
    text-align: center;    
}

如何在table-cell组件中换行？

2 个答案: