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 Link

https://jsfiddle.net/qe3m2ryv/

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

Answer 2

将4幅图像放入4个div中，固定高度相同，设置宽度：100％;对你的图像。我认为这个解决方案适合你。

Answer 3

我不确定你是否希望这些图像并排，中间没有边距，或者如果你想要介于2％之间的边距，那么我在同一个小提琴中同时使用现有的代码进行显示：

我所做的是删除图像标签并用div包装图像并将其命名为“images”类，并使用display：inline-block对其进行样式设置。我还给每个图像一个“img”的id，并用所需的宽度和高度设置样式。

请注意，我给第一张图片的边距为0，这样它们可以并排而没有间隙，而其他图像则为2％，以显示每种图像的外观。

https://jsfiddle.net/ychpjxps/2/

这是css：

.images{
  display:inline-block;
}


#img{
  width:75px;
  height:100px;  
}

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

3 个答案: