当前正在使用Drupal Cloud的网站上更新帖子。我可以使用css_injector工具将css添加到帖子所在的页面，并且可以在帖子中使用HTML。我试图得到一个看起来像这样的东西，但它看起来像这样。
标题只集中在一些图像下方（应该是每个图像），并且图像并没有在每行水平排列。所有的图像都是相同的大小，我希望这样，如果浏览器窗口小于帖子的宽度，图像就会保持不变，而不是跳出一行。
在JSFiddle中，输出看起来不错，但在网页上则不然。图像的宽度小于页面上容器宽度的一半，标题小于图像的宽度，所以我不明白它们为什么不排列。如有任何帮助，我们将不胜感激！
这是我的CSS和HTML:
ul {
list-style: none;
table-layout: fixed;
width: 100%;
border: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
li {
list-style: none;
text-align: center;
display: table-row;
}
figure {display:inline}
figcaption {display:block}
figure.left {float:left}
figure.right {float:right}
.left {
float: center;
border: none;
padding: 10px;
margin:0px;
}
figcaption {
text-align:center;
width: 360px;
}
.right {
float: center;
border: none;
padding: 10px;
margin:0px;
}<ul>
<li>
<figure class="left"><span><a href="http://nrl.mit.edu/sites/default/files/images/ExplainingDesign.jpg" target="_blank"><img alt="Explaining Reactor Design" src="http://nrl.mit.edu/sites/default/files/images/ExplainingDesign.jpg" style="width: 370px; height: 276px" /></a> </span>
<figcaption><span>Explaining the design of the MIT reactor</span></figcaption>
<span> </span></figure>
<figure class="right"><span><a href="http://nrl.mit.edu/sites/default/files/images/NaturalRadFacts.jpg" target="_blank"><img alt="Surprised about natural radiation facts" src="http://nrl.mit.edu/sites/default/files/images/NaturalRadFacts.jpg" style="width: 370px; height: 276px" /></a> </span>
<figcaption><span>Participants were surprised about facts where everyday sources of natural radiation can be found</span></figcaption>
<span> </span></figure>
</li>
<li>
<figure class="left"><span><a href="http://nrl.mit.edu/sites/default/files/images/QsFromAllAges.jpg" target="_blank"><img alt="Answering questions from all ages" src="http://nrl.mit.edu/sites/default/files/images/QsFromAllAges.jpg" style="width: 370px; height: 276px" /></a> </span>
<figcaption><span>Answering questions from all ages!</span></figcaption>
<span> </span></figure>
<figure class="right"><span><a href="http://nrl.mit.edu/sites/default/files/images/MultipleStaff.jpg" target="_blank"><img alt="Multiple staff members on hand" src="http://nrl.mit.edu/sites/default/files/images/MultipleStaff.jpg" style="width: 370px; height: 276px" /></a> </span>
<figcaption><span>Multiple staff members were on hand to field insightful questions from attendees</span></figcaption>
<span> </span></figure>
</li>
<li>
<figure class="left"><span><a href="http://nrl.mit.edu/sites/default/files/images/SpectroscopyDemo.jpg" target="_blank"><img alt="Demonstrating how spectroscopy works" src="http://nrl.mit.edu/sites/default/files/images/SpectroscopyDemo.jpg" style="width: 370px; height: 276px" /></a> </span>
<figcaption><span>Demonstrating how spectroscopy works</span></figcaption>
<span> </span></figure>
<figure class="right"><span><a href="http://nrl.mit.edu/sites/default/files/images/NewConcept.jpg" target="_blank"><img alt="Spectroscopy was a new concept" src="http://nrl.mit.edu/sites/default/files/images/NewConcept.jpg" style="width: 370px; height: 276px" /></a> </span>
<figcaption><span>Spectroscopy was a new concept for many visitors</span></figcaption>
<span> </span></figure>
</li>
<li>
<figure class="left"><span><a href="http://nrl.mit.edu/sites/default/files/images/HSstudents.jpg" target="_blank"><img alt="High school students asking questions" src="http://nrl.mit.edu/sites/default/files/images/HSstudents.jpg" style="width: 370px; height: 276px" /></a> </span>
<figcaption><span>High school students took the opportunity to ask about what it's like to work at the reactor</span></figcaption>
<span> </span></figure>
<figure class="right"><span><a href="http://nrl.mit.edu/sites/default/files/images/AnsweringwithaSmile.jpg" target="_blank"><img alt="Surprised about natural radiation facts" src="http://nrl.mit.edu/sites/default/files/images/AnsweringwithaSmile.jpg" style="width: 370px; height: 276px" /></a> </span>
<figcaption><span>Answering questions with a smile!</span></figcaption>
<span> </span></figure>
</li>
<li>
<figure class="left"><span><a href="http://nrl.mit.edu/sites/default/files/images/YoungestAttendees.jpg" target="_blank"><img alt="Youngest attendees" src="http://nrl.mit.edu/sites/default/files/images/YoungestAttendees.jpg" style="width: 370px; height: 276px" /></a> </span>
<figcaption><span>Our youngest attendees enjoying their time at the event</span></figcaption>
<span> </span></figure>
<figure class="right"><span><a href="http://nrl.mit.edu/sites/default/files/images/GeigerExplanation.jpg" target="_blank"><img alt="Geiger counter explanation" src="http://nrl.mit.edu/sites/default/files/images/GeigerExplanation.jpg" style="width: 370px; height: 276px" /></a> </span>
<figcaption><span>Explaining how a Geiger counter works to detect radiation using natural sources (such as granite) as examples</span></figcaption>
<span> </span></figure>
</li>
<li>
<figure class="left"><span><a href="http://nrl.mit.edu/sites/default/files/images/SpectroscopyExplanation.jpg" target="_blank"><img alt="Explaining spectroscopy" src="http://nrl.mit.edu/sites/default/files/images/SpectroscopyExplanation.jpg" style="width: 370px; height: 276px" /></a> </span>
<figcaption><span>Explaining how spectroscopy gives you a readout of what gamma rays are being emitted from a source and how you can use that to find out what kind of isotope they belong to</span></figcaption>
<span> </span></figure>
<figure class="right"><span><a href="http://nrl.mit.edu/sites/default/files/images/HappytoHelp.jpg" target="_blank"><img alt="Happy to help" src="http://nrl.mit.edu/sites/default/files/images/HappytoHelp.jpg" style="width: 370px; height: 276px" /></a> </span>
<figcaption><span>Our staff members were more than happy to help answer questions from the public and teach them about nuclear science and technology</span></figcaption>
<span> </span></figure>
</li>
<li>
<figure class="left"><span><a href="http://nrl.mit.edu/sites/default/files/images/SpectroscopyDisplay.jpg" target="_blank"><img alt="Spectroscopy display" src="http://nrl.mit.edu/sites/default/files/images/SpectroscopyDisplay.jpg" style="width: 370px; height: 276px" /></a> </span>
<figcaption><span>The display from the spectroscopy station showing the gamma ray spectrum of an orange Fiestaware cup. The red peaks on the display show the gamma rays being emitted from the radioactive decay of the natural uranium used in the glaze on the cup</span></figcaption>
<span> </span></figure>
<figure class="right"><span><a href="http://nrl.mit.edu/sites/default/files/images/HandsOnApproach.jpg" target="_blank"><img alt="Hands-on approach" src="http://nrl.mit.edu/sites/default/files/images/HandsOnApproach.jpg" style="width: 370px; height: 276px" /></a> </span>
<figcaption><span>Giving a hands-on approach to detecting radiation using a Geiger counter and natural sources of radiation</span></figcaption>
<span> </span></figure>
</li>
</ul>我刚刚用以下内容替换了您的CSS，并从img 中删除了style="..."
img {
width: 100%;
height: auto;
}
查看此JSFiddle演示。
好的。我终于找到了一个可行的方法！我使用了Hearty的建议，但在HTML中保持了高度和宽度的限制，因为我不能让方框离开空白区域并扩展页面。现在，图片在两个垂直列中显示得很好，每行中的图片都在同一级别上。
然而，我仍然不知道为什么一些figcaption值没有集中在相应的图片下。我试着在每个图的标题中添加一个类来提供帮助，但它不起作用。我直播了这个帖子，你可以在这里查看。我不会再挑剔了，现在就这样吧，除非有人建议我如何把所有的字幕都放在中心。谢谢
img {
width: 100%;
height: auto;
}
.center {
text-align: center;
width: 360px;
}<table>
<tbody>
<tr>
<td>
<figure class="left"><span><a href="http://nrl.mit.edu/sites/default/files/images/ExplainingDesign.jpg" target="_blank"><img alt="Explaining Reactor Design" src="http://nrl.mit.edu/sites/default/files/images/ExplainingDesign.jpg" style="width: 370px; height: 276px" /></a> </span>
<figcaption class="center"><span>Explaining the design of the MIT reactor</span></figcaption>
<span> </span></figure>
</td>
<td>
<figure class="left"><span><a href="http://nrl.mit.edu/sites/default/files/images/NaturalRadFacts.jpg" target="_blank"><img alt="Surprised about natural radiation facts" src="http://nrl.mit.edu/sites/default/files/images/NaturalRadFacts.jpg" style="width: 370px; height: 276px" /></a> </span>
<figcaption class="center"><span>Participants were surprised about facts where everyday sources of natural radiation can be found</span></figcaption>
<span> </span></figure>
</td>
</tr>
<tr>
<td>
<figure class="left"><span><a href="http://nrl.mit.edu/sites/default/files/images/QsFromAllAges.jpg" target="_blank"><img alt="Answering questions from all ages" src="http://nrl.mit.edu/sites/default/files/images/QsFromAllAges.jpg" style="width: 370px; height: 276px" /></a> </span>
<figcaption class="center"><span>Answering questions from all ages!</span></figcaption>
<span> </span></figure>
</td>
<td>
<figure class="left"><span><a href="http://nrl.mit.edu/sites/default/files/images/MultipleStaff.jpg" target="_blank"><img alt="Multiple staff members on hand" src="http://nrl.mit.edu/sites/default/files/images/MultipleStaff.jpg" style="width: 370px; height: 276px" /></a> </span>
<figcaption class="center"><span>Multiple staff members were on hand to field insightful questions from attendees</span></figcaption>
<span> </span></figure>
</td>
</tr>
<tr>
<td>
<figure class="left"><span><a href="http://nrl.mit.edu/sites/default/files/images/SpectroscopyDemo.jpg" target="_blank"><img alt="Demonstrating how spectroscopy works" src="http://nrl.mit.edu/sites/default/files/images/SpectroscopyDemo.jpg" style="width: 370px; height: 276px" /></a> </span>
<figcaption class="center"><span>Demonstrating how spectroscopy works</span></figcaption>
<span> </span></figure>
</td>
<td>
<figure class="left"><span><a href="http://nrl.mit.edu/sites/default/files/images/NewConcept.jpg" target="_blank"><img alt="Spectroscopy was a new concept" src="http://nrl.mit.edu/sites/default/files/images/NewConcept.jpg" style="width: 370px; height: 276px" /></a> </span>
<figcaption class="center"><span>Spectroscopy was a new concept for many visitors</span></figcaption>
<span> </span></figure>
</td>
</tr>
<tr>
<td>
<figure class="left"><span><a href="http://nrl.mit.edu/sites/default/files/images/HSstudents.jpg" target="_blank"><img alt="High school students asking questions" src="http://nrl.mit.edu/sites/default/files/images/HSstudents.jpg" style="width: 370px; height: 276px" /></a> </span>
<figcaption class="center"><span>High school students took the opportunity to ask about what it's like to work at the reactor</span></figcaption>
<span> </span></figure>
</td>
<td>
<figure class="left"><span><a href="http://nrl.mit.edu/sites/default/files/images/AnsweringwithaSmile.jpg" target="_blank"><img alt="Answering questions with a smile" src="http://nrl.mit.edu/sites/default/files/images/AnsweringwithaSmile.jpg" style="width: 370px; height: 276px" /></a> </span>
<figcaption class="center"><span>Answering questions with a smile!</span></figcaption>
<span> </span></figure>
</td>
</tr>