html - 以相同的宽度和高度并排制作图像？

Question

我是 HTML 和 CSS 的新手， 我创建了 HTML/CSS 页面并想并排放置 4 个图像 具有不同的宽度和高度， 我希望它们都具有相同的宽度和高度， 因为它们在不同的宽度和高度下看起来不太好， 因此，信息也不会出现在同一行上

CSS:

      p {
        line-height: 20px;
        margin-bottom: 20px;
    }
     .clear {
        clear: both;
    }

    .wrapper {
        margin: 0 auto;
        padding: 0 10px;
        width: 940px;
    }       
    #primary-content {
        background-color: #f8fafa;
        padding: 20px 0;
        text-align: center;
    }

    #primary-content h3 {
        display: block;
        margin: 0 auto 20px auto;
        width: 400px;
        border-bottom: 1px solid #02b8dd;
        padding: 0 0 20px 0;
    }

    #primary-content images{
        margin: 20px 0;
    }

HTML:

<div id="primary-content">
    <div class="wrapper">
        <article>
            <h3>Test</h3>

            <images>

                <p style="float:left; width: 23%; margin-right: 2%; margin-bottom: 0.5em;">
                    <img src="images/img1.jpg" alt="img1" title="img1" style="width: 100%" /> info
                </p>


                <p style="float:left; width: 23%; margin-right: 2%; margin-bottom: 0.5em;">
                    <img src="images/img2.jpg" alt="img2" title="img2" style="width: 100%" /> info
                </p>



                <p style="float:left; width: 23%; margin-right: 2%; margin-bottom: 0.5em;">
                    <img src="images/img3.jpg" alt="img3" title="img3" style="width: 100%" /> info
                </p>


                <p style="float:left; width: 23%; margin-right: 2%; margin-bottom: 0.5em;">
                    <img src="images/img4.jpg" alt="img4" title="img4" style="width: 100%" /> info
                </p>


                <p style="float:left; width: 23%; margin-right: 2%; margin-bottom: 0.5em;">
                    <img src="images/img5.jpg" alt="img5" title="img5" style="width: 100%" /> info
                </p>


                <p style="float:left; width: 23%; margin-right: 2%; margin-bottom: 0.5em;">
                    <img src="images/img6.jpg" alt="img6" title="img6" style="width: 100%" /> info
                </p>

                <p style="float:left; width: 23%; margin-right: 2%; margin-bottom: 0.5em;">
                    <img src="images/img7.jpg" alt="img7" title="img7" style="width: 100%" /> info
                </p>

                <p style="float:left; width: 23%; margin-right: 2%; margin-bottom: 0.5em;">
                    <img src="images/img8.jpg" alt="img8" title="img8" style="width: 100%" /> info
                </p>

                <div class="clear"></div>
            </images>

        </article>
    </div>
</div>

谢谢

Answer 1

做这样的事情:

<div class="images">
  <img src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg">
  <img src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg">
  <img src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg">
  <img src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg">
</div>

.images img {
  width: 100px;
  height: 100px;
  float: left;
}

给你所有的图片一个宽度和一个高度，然后将它们向左浮动

jsFiddle 链接

https://jsfiddle.net/qe3m2ryv/

有用的信息:无需将每张图像包装在自己的 <p> 中在这种情况下标记。和标签 <images>不存在。使用一个 div 并给它一个名为 images 的类。