Я хочу добавить три изображения на веб-сайт html: два в ряд и одно под ними в центре, а также сделать их совместимыми с мобильными устройствами. Пожалуйста, помогите мне, если у кого-нибудь есть решение для этого. Я искал, но не нашел решения для совместимости, и изображения располагаются в правильном порядке.
0
pranav mody
29 Авг 2017 в 08:14
3 ответа
Лучший ответ
Лучший способ сделать это - использовать классы начальной загрузки .
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="thumbnail">
<img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Schrodinger-as-a-kitten..png" style="width:100%">
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="thumbnail">
<img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Schrodinger-as-a-kitten..png" style="width:100%">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="thumbnail">
<img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Yoshi-The-Seal-Kitteh.jpg" style="width:100%">
</div>
</div>
</div>
</div>
0
Farhad Bagherlo
29 Авг 2017 в 06:09
Посмотрите на это, это то, что вам нужно? я использовал display:inline-block
и text-align:center
.img_container {
width: 100%;
float: left;
text-align: center;
}
.img_container div {
display: inline-block;
width: 49%;
}
.img_container div img {
width: 100%;
}
<div class="img_container">
<div>
<img src="https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg" alt="image" />
</div>
<div>
<img src="https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg" alt="image" />
</div>
<div>
<img src="https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg" alt="image" />
</div>
</div>
0
Jishnu V S
29 Авг 2017 в 05:20
Надеюсь, вы этого ищете.
<div class="row">
<div class="col-sm-12">
<div class="col-sm-6 pull-left"><img src=""/></div>
<div class="col-sm-6 pull-right"><img src=""/></div>
<br>
</div>
<div class="col-sm-12" style="margin: auto"></div>
</div>
0
DPS
29 Авг 2017 в 05:20
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.