如何並排排列三個背景圖像

我試圖並排排列三個背景圖像，理想情況下具有流動性，以便在瀏覽器窗口調整大小時重新定位。如何並排排列三個背景圖像

我試過尋找這個問題的答案，並認爲使用CSS屬性適合對齊常規'img src'元素將工作，但他們沒有。

本質上，我有一個畫廊的頁面。每張圖片的中心都有一個城市名稱。通過研究，我已決定將背景圖像屬性分配給三個獨立的div，並使用與每個圖像的高度匹配的line-height屬性，以使城市名稱與中心對齊。背景圖像技術有助於城市名稱的對齊。

我哪裏錯了？

#jumbotron2 { 
 
    height: 500px; 
 
    width: 100%; 
 
} 
 
#city-container { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.london-square { 
 
    height: 400px; 
 
    width: 400px; 
 
    background-image: url("tombnb-images/london-400px.jpg") 
 
} 
 
.newyork-square { 
 
    height: 400px; 
 
    width: 400px; 
 
    background-image: url("tombnb-images/newyork-400px.jpg") 
 
} 
 
.sydney-square { 
 
    height: 400px; 
 
    width: 400px; 
 
    background-image: url("tombnb-images/sydney-400px.jpg") 
 
} 
 
.square p { 
 
    font-family: 'Slabo 27px', serif; 
 
    font-size: 32px; 
 
    color: #FFFFFF; 
 
    line-height: 400px; 
 
    text-align: center; 
 
    text-shadow: 0px 0px 10px black; 
 
}

<div id="jumbotron2"> 
 

 
    <div id="city-container"> 
 

 
    <div class="london-square square"> 
 
     <p id="text">London</p> 
 
    </div> 
 

 
    <div class="newyork-square square"> 
 
     <p id="text">New York</p> 
 
    </div> 
 

 
    <div class="sydney-square square"> 
 
     <p id="text">Sydney</p> 
 
    </div> 
 

 
    </div> 
 

 
</div>

來源

2016-09-18 Thomas Morgan

好了，他們都有一個固定的寬度：'寬度：400像素;'，你嘗試過換是出於對一個百分比，例如'寬度：30％;'？ – DBS

我認爲你需要做float：爲了將它們水平對齊，所有其中的3個都是float。或顯示：根據您的佈局，內聯塊也可以工作。如果您沿着浮動路線走下去，您將需要爲3個div的容器添加一個clearfix。搜索clearfix，我相信你會找到很多答案。 – klikas

@DBS - 每張圖片都是原生的400px正方形，所以％會使它們比我想要的要小。 –

，如果您使用的div的百分比寬度

，你必須把它們飄浮過。我使用推薦此：

#city-container { 
    width: 100%; 
    height: 100%; 
    display: flex; 
    justify-content: center; 
    flex-warp: wrap; 
}

來源

2016-09-18 22:10:55

謝謝Marouen。將這三行代碼添加到我的＃city-container div中！ –

no pbm :-)請記住，IE不支持flexbox = <= 9 –

您可以使用自舉。你把你的圖片放在div裏面。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-sm-4"> 
 
    <img class="img-thumbnail" src="http://www.nature.org/cs/groups/webcontent/@web/@giftplanning/documents/media/sample-cga-rates-splash-1.jpg"> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
    <img class="img-thumbnail" src="http://sharedforfree.com/wp-content/uploads/2013/07/cropped-harrimanToday.jpg"> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
    <img class="img-thumbnail" src="http://pre02.deviantart.net/f34e/th/pre/f/2015/182/4/f/croatia_nature_pack___sample__2___proref_org_by_proref-d8zgrc2.jpg"> 
 
    </div> 
 
</div>

看看這個小提琴： jsfiddle example

來源

2016-09-19 06:06:32

如何並排排列三個背景圖像

回答

相關問題