Question

我试图水平排列3张图片（每张图片都包含在自己的div标签中）。当我在css中设置display：inline时，我得到了我想要的结果。

问题是当我为每个图像添加一个图形标记时（这样我可以在每个图像下面有一个图形）。现在，3个图像垂直排列，一个在另一个之下。我该如何解决这个问题？

HTML

<div class="projectGallery">
    <div class="projectContainer">
        <figure>
        <img src="http://images.clipartpanda.com/penguin-clip-art-aiq5zAqiM.png" class="projects" class="projects"/><figcaption></figcaption>
        </figure>
    </div>
    <div class="projectContainer">
        <figure>
        <img src="http://img03.deviantart.net/c670/i/2013/086/5/2/golden_gate_bridge_by_ev_sta-d5zg113.jpg" class="projects"/><figcaption></figcaption>
        </figure>  
    </div>
    <div class="projectContainer">
        <figure>
        <img src="https://s-media-cache-ak0.pinimg.com/736x/a6/ee/6f/a6ee6f0db923eb8919803b89f37939ee.jpg" class="projects" class="projects"/><figcaption></figcaption>  
        </figure>
    </div>
</div>

CSS

div.projectGallery {
text-align: center;
padding-top: 60px;
}

div.projectContainer {
display: inline;
margin: 20px;
} 

img.projects {
max-width: 20%;
height: auto;
width: auto\9;
border:1px solid #A1B7CC;
}

Answer 1

使你的div处于水平位置我建议使用

display:inline-block

在您的CSS中，将display:inline编辑为display:inline-block

div.projectContainer {
display: inline-block;
margin: 20px;
}

希望得到这个帮助。

当div显示设置为内联

1 个答案: