如何在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中放置多個項目/圖像

回答

相關問題