3 изображения на сайте

Question

Я хочу добавить три изображения на веб-сайт html: два в ряд и одно под ними в центре, а также сделать их совместимыми с мобильными устройствами. Пожалуйста, помогите мне, если у кого-нибудь есть решение для этого. Я искал, но не нашел решения для совместимости, и изображения располагаются в правильном порядке.

javascript html css

0

pranav mody 29 Авг 2017 в 08:14

Answer 1

Лучший способ сделать это - использовать классы начальной загрузки .

Bootstrap Grid Примеры

<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

Answer 2

Посмотрите на это, это то, что вам нужно? я использовал 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

Answer 3

Надеюсь, вы этого ищете.

<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

3 изображения на сайте

3 ответа

Похожие вопросы

Новые вопросы

javascript