Question

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

HTML

＆＃13;

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

＆＃13;

<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>

＆＃13;

我遇到了第三个标题为实惠价格的问题

感谢您提前提供任何帮助

Answer 1

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

params[:order].try(:[], :items_attributes)

然后将每个coloumn设置为 30％（您可能需要调整此值，具体取决于您为容器和子元素提供的边距和填充）

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

nil

在网站的主体中并排排列三个图像

1 个答案: