在网站正文中并排对齐三个图像答案

【问题标题】：align three images side by side in body of website在网站正文中并排对齐三个图像
【发布时间】：2015-08-19 13:58:59
【问题描述】：

在我的网站主页上将 3 张图片与文本并排对齐时遇到问题。前两个图像完全对齐并居中，但最后一个图像不会移动并落入原位。相反，它位于我页面上其他图像的左侧下方。这是我正在使用的代码：

HTML

.picture_row li {
  float: left;
  display: inline;
  font-family: "Arial";
}

<div class="picture_row">
  <ul>
    <li>
      <h3>Custom Web Designs</h3>
      <img src="http://lorempixel.com/300/250" width="400" height="250" />
      <h5>Represent your business with a Custom Web Design.</h5>
    </li>

    <li>
      <h3>Responsive Web Designs</h3>
      <img src="http://lorempixel.com/300/250" width="400" height="250" />
      <h5>Responisve Web Design allows for better viewing experience on mobile devices</h5>
    </li>

    <li>
      <h3>Affordable Pricing</h3>
      <img src="http://lorempixel.com/300/250" width="300" height="250" />
      <h5>Our competitive pricing lets you stay within your budget while gettting quality custom design work.</h5>
    </li>
  </ul>
</div>

我在第三个标题为负担得起的价格方面遇到了麻烦

提前感谢您的帮助

【问题讨论】：

您的页面需要至少 1100 像素宽，以便有足够的空间将三个图像显示在一行中。小屏幕呢，你想要响应式布局吗？
是的，我想要一个响应式布局

标签： html css

【解决方案1】：

将此 CSS 添加到您的代码中首先将容器的宽度设置为100%

.picture_row{
    width:100%;
}

然后将每个列设置为 30% 左右（您可能需要根据为容器和子元素提供的边距和填充进行调整）

它将li元素分成3个等宽的容器

.picture_row li{
    float:left; 
    display: inline;
    font-family: "heiti sc"
    width:30%;
}

【讨论】：