如何在div中放置多个项目/图像

我在将三个图像置于容器内部时遇到问题。我使用的是Bootstrap，但是由于稍后会添加一些覆盖内容，我想避免其一些网格系统，并将这三个图像集中在独立的位置。这里的笔，来展示目前状态：http://codepen.io/anon/pen/yVovqW 如何在div中放置多个项目/图像

.container { 
    background-color: lightgreen; 
} 

.images { 
    padding: 10px; 
} 

.about__images { 
    max-width: 900px; 
    margin: 0 auto; 
    text-align: center; 
    //margin-top: 60px; 
} 

.about__inner img { 
    max-width: 100%; 
    //margin-right: 20px; 
} 

.about__inner { 
    margin-right: 20px; 
    position: relative; 
    width: 250px; 
    float: left; 
} 

<div class="container images"> 
    <div class="about__images"> 
    <div class="about__inner"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt=""> 

    </div> 
    <div class="about__inner"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt=""> 

    </div> 
    <div class="about__inner"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97300&w=400&h=300" alt=""> 

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

来源

2016-11-27 Smithy

我的目标是为IE8 +，但IE9 +也应该这样做..你在想Flex吗？ – Smithy

更改为float left;在display:inline-block;的.about__inner类，你应该是好去。

来源

2016-11-27 12:06:01 palako

这么简单..谢谢 – Smithy

我会建议display:flex;但与代码后打了一下，我发现，您可以修复它，如果你只是改变了这部分代码：DEMO

.about__inner { 
    margin-right: 20px; 
    position: relative; 
    width: 250px; 
    display:inline-block; //float: left; 
}

来源

2016-11-27 12:07:24

如何在div中放置多个项目/图像

回答

相关问题