Как выровнять три фоновых изображения бок о бок

Я пытаюсь выровнять три фоновых изображения бок о бок, в идеале с текучестью, чтобы они снова позиционировались при изменении размера окна браузера.Как выровнять три фоновых изображения бок о бок

Я попытался найти ответ на эту проблему и подумал, что использование свойств CSS, подходящих для выравнивания регулярных элементов «img src», будет работать, однако их нет.

По существу, у меня есть страница с галереей. Каждое изображение имеет название города в центре. Благодаря исследованиям я решил присвоить свойство background-image три отдельных 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

Ну, все они имеют фиксированную ширину: 'ширина: 400px;', вы пробовали замены, которые за процент, например, 'width: 30%;'? – DBS

Я думаю, вам нужно сделать float: оставить все 3 из них, чтобы выровнять их по горизонтали. Или дисплей: встроенный блок будет работать также в зависимости от вашего макета. Если вы спуститесь по маршруту поплавка, вам нужно будет добавить clearfix в контейнер из 3 разделов. Поиск clearfix, я уверен, что вы найдете много ответов. – klikas

@DBS - каждое изображение представляет собой собственный квадрат размером 400 пикселей, поэтому% сделает их меньше, чем я предполагал. –

если вы используете процентную ширину ваших дивы вы должны плавать их. Я Recommand с помощью этого:

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

источник

2016-09-18 22:10:55

Спасибо, Маруэн. Добавление этих трех строк кода в мой # city-container div сработало! –

no pbm :-) просто имейте в виду, что flexbox не поддерживается в IE <= 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

Как выровнять три фоновых изображения бок о бок

ответ

Смежные вопросы