Question

这实际上并不是订单（目前），但我认为最能描述它。我想创建一个内嵌3个图像的网格，然后在每个图像下方生成文本，然后无限重复。我尝试将每一行变成一个独特的表，但是对齐成了一个问题。然后我尝试制作一张桌子并给出图像和文字＆lt; tr＆gt;的唯一类，但是我无法将文本行的高度缩小到更美观的大小，并且还使文本在图像下方居中。我试图用尽可能多的＆＃34;＆amp; NBSP＆＃39; S＆＃34;虽然合适，但随后文本开始包装到一个新的行，它搞砸了所有这一切。代码和链接到js小提琴下面：

<table id="saladGrid">
   <tr class="saladPics">
    <td id="one"></td>
    <td id="two"></td>
    <td id="three"></td>
   </tr>

   <tr class="saladText">
    <td class="text"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; acorn squash, golden beets, pistachios</p></td>
    <td class="text"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; roasted eggplant, herbed ricotta, sumac</p></td>
    <td class="text"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arugula, fennel, blackberries, quinoa, pickled shallots</p></td>
   </tr>

http://jsfiddle.net/jshweky/5bTW8/

（另一方面，我是stackoverload的新手，所以如果有任何协议我没有关注发布，我会感激任何提示/建议谢谢！）

Answer 1

看看这个： http://jsfiddle.net/EX9f9/

如果您查看下面的代码，您会注意到以下几点：

<强> HTML

<table id="saladGrid">
    <tr class="saladPics">
        <td class="s1"></td> //I changed your classes 'one','two',etc
        <td class="s2"></td>
        <td class="s3"></td>
    </tr>
    <tr class="saladTxt">
        <td class="txt"><p>acorn squash, golden beets, pistachios</p></td>
        <td class="txt"><p>roasted eggplant, herbed ricotta, sumac</p></td>
        <td class="txt"><p>arugula, fennel, blackberries, quinoa, pickled shallots</p></td>
    </tr>
</table>

在您的HTML中，我将您的id one，two等更改为由相同的字/字母组成的类，只有不同的数字，以提高可读性。（那些也可能是ID的顺便说一下，重点是使用只有一个区别的平等条款）

<强> CSS

table {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
    border-spacing: 0px;
}
td {
    margin: 0px;
    padding: 0px;
    border: 0px;
    text-align: center;
    vertical-align: middle;
}

#saladGrid {
    width: 600px;
    height: 400px;
}
#saladGrid table {
    margin: 0 auto;
    border-spacing: 30px;
}
.saladPics td {
    width: 350px;
    height: 350px;
    background-position: center;
    background-size: 350px 350px;
    background-repeat: no-repeat;
    border-radius: 50px;
}
.saladPics td.s1 {background-image:url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1989_zps38d802a7.jpg");}
.saladPics td.s2 {background-image:url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1483_zpsc4ca87cf.jpg");}
.saladPics td.s3 {background-image:url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1992_zps1b881869.jpg");}

在CSS中，我删除了所有重复的声明，并将它们放在一个重叠的类中。现在，只有背景图像对每个单独的元素都有一个单独的规则。
我删除了一些你不需要的规则（并且可能在尝试根据自己的喜好设置表格时失败了）。
一开始我添加了两条规则：table和td。这些是我在CSS开头时总是提到的两个通用课程，如果你稍后通过其他规则覆盖其中一些课程，那就好了，这些只是确保浏览器不会做任何时髦的事情。
我将整个表格放在div中，向您展示如何包含表格的大小（但请注意，高度仍然高于我给出的400px。
请注意text-align:center;规则中的vertical-align: middle;和td。这些可以水平和垂直地点亮您的文字。（主要问题的答案）
重要：vertical-align:middle;仅适用于表格，不适用于其他元素。牢记这一点！

关于你的第一个问题：
＆＃34; ...无法让文字行的高度缩小到更美观的大小...＆＃34;

不幸的是，这是表的一个属性：它将自己形成内容和页面上的空间。它将填充它获得的每一寸，并将自动拉伸以适应内容。你不能（据我所知）限制一行表的大小。

唯一的解决方法是将表放在div中并限制div的高度，以便整个表格被挤压在一起，即便如此，我也无法告诉您表格的确如何表现。你把它推到一个小角落里，不知道它会做什么：）

试图将图像和文本组织成一种订单形式

1 个答案: