html - 如何使用 HTML 和 CSS 将 14 张图片放在两个垂直列中，每张图片下方都有一个标题，并且图片也排在每一行上？

Question

目前正在更新一个使用 Drupal Cloud 的网站上的帖子。我可以使用 css_injector 工具将 css 添加到帖子所在的页面，并且可以在帖子中使用 HTML。 I am trying to get something that looks like this而是it's looking like this.

标题仅在某些图片(应该是每张图片)下方居中，并且图片并未水平排列在每一行上。所有图像的大小都相同，我希望这样，如果浏览器窗口小于帖子的宽度，图像将保持不变而不是跳出线。

在 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&#39;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>

Answer 1

我刚刚用以下内容替换了您的 CSS 并从 img 中删除了 style="..."

img {
    width: 100%;
   height: auto;
}

检查 this JSFiddle 演示。