Bootstrap: как выровнять изображения на границе браузера?

-1

illustration of what i want Bootstrap: как выровнять изображения на границе браузера?

Я хочу, чтобы некоторые divs соответствовали соответствующим изображениям на границе браузера (слева или справа от каждого div).

Есть ли способ сделать это без использования JS?

Как сейчас я использовать изображение в качестве фона для контейнера-жидкости:

<div class="container-fluid diamondBG"> 
    <div class="container"> 
     <div class="row" style="text-align:center;"> 
     <div style="display:inline-block; float:none; text-align:left;" class="col-md-9"> 
      Some text 
     </div> 
     </div> 
    </div> 
    </div>

CSS:

.diamondBG{ 
    background-image: url('images/diamondLarge.png'); 
    background-position: right; 
    background-repeat: no-repeat; 
}

Это не решение, как Б.Г. изображение обрезается до высоты дела. Величина div не должна указываться.

источник

2016-03-13 Viatcheslav Tarasov

Решение изображение с «позиции: абсолютное» и «право: 0» или «влево: 0» в контейнере-жидкости:

<div class="container-fluid"> 
    <img src="images\diamondLarge.png" style="position:absolute; right:0; margin-top:-60px;"> 
    <div class="container"> 
     <div class="row" style="text-align:center;"> 
     <div style="display:inline-block; float:none; text-align:left;" class="col-md-9"> 
      Some text 
     </div> 
     </div> 
    </div> 
</div>

источник

2016-03-13 18:47:21

-1

эй я буду прыгать это поможет вам

<!DOCTYPE html> 
<html> 
<head> 
    <title>ayuda</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
    <style type="text/css"> 
     *{ 
      padding:0 !important; 
     } 
    </style> 
</head> 
<body> 

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-offset-10 col-md-2"> 
     <img src="http://urdunovels.info/wp-content/uploads/2015/03/green-city-gandhinagar-portal-bg.jpg" width="200"/> 
    </div> 
    <div class="col-md-2"> 
     <img src="http://urdunovels.info/wp-content/uploads/2015/03/green-city-gandhinagar-portal-bg.jpg" width="200"/> 
    </div> 
    <div class="col-md-offset-10 col-md-2"> 
     <img src="http://urdunovels.info/wp-content/uploads/2015/03/green-city-gandhinagar-portal-bg.jpg" width="200"/> 
    </div> 
    <div class="col-md-2"> 
     <img src="http://urdunovels.info/wp-content/uploads/2015/03/green-city-gandhinagar-portal-bg.jpg" width="200"/> 
    </div> 
    </div> 
</div> 

</body> 
</html>

источник

2016-03-13 00:49:43 sittelle

Это очень плохая практика – Stuart

Спасибо, sittelle. Это не решение моей проблемы, так как изображение и высота div не должны быть взаимозависимыми. –

Bootstrap: как выровнять изображения на границе браузера?

ответ

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