如何并排排列三个背景图像

我试图并排排列三个背景图像，理想情况下具有流动性，以便在浏览器窗口调整大小时重新定位。如何并排排列三个背景图像

我试过寻找这个问题的答案，并认为使用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

如何并排排列三个背景图像

回答

相关问题