如何并排对齐三个背景图像

Question

I'm trying to align three background images side by side, ideally with fluidity so that they re-position when my browser window resizes.

I've tried searching for an answer to this problem and thought using CSS properties suited to aligning regular 'img src' elements would work, however they haven't.

Essentially, I have a page with a gallery. Each image has a city name in it's center. Through research, I've decided to assign a background-image property to three separate divs and used the line-height property matching the height of each image so that the city name aligns itself in the center. The background-image technique assists in the alignment of the city name.

Where am I going wrong?

 #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>

Answer 1

if you use a percentage width of your divs you have to float them too. I recommand using this:

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

Answer 2

You can use bootstrap. you put your images inside divs.

 <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>

Check out this fiddle: jsfiddle example