Невозможно выровнять изображения в каждой строке три - PullRequest
Новая
       9

Невозможно выровнять изображения в каждой строке три

0 голосов
/ 17 мая 2018

Я пытаюсь отобразить три изображения в одной строке

для этого я использую 

<div ng-repeat="p in imageses">
        <div class="col-sm-4" >
            <img ng-src="{{p.path}}" class="rounded"/>
        </div>
    </div>

это показывает только одно изображение в строке, я хочу показать три изображения в строке

Ответы [ 3 ]

0 голосов
/ 17 мая 2018 
 <html>
 <head>
 <style>
 * {
  box-sizing: border-box;
 } 

.column {
 float: left;
 width: 33.33%;
 padding: 5px;
  }

 /* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
} 
</style>
</head>
<body>

<h2>Images Side by Side</h2>
<p>How to create side-by-side images with the CSS float property:</p>

<div class="row"> 
 <div class="column">
<img src="img_fjords.jpg" alt="Fjords" style="width:100%">
 </div>
 <div class="column">
<img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
   <div class="column">
<img src="img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>

</body>
</html>
0 голосов
/ 17 мая 2018

Базовая структура должна быть следующей: 

<div class="container"><!--use container-fluid if you want full width-->
  <div class="row">
    <div class="col-sm-4">
      One of three columns
    </div>
    <div class="col-sm-4">
      One of three columns
    </div>
    <div class="col-sm-4">
      One of three columns
    </div>
  </div>
</div>

Для лучшего уточнения, пожалуйста, проверьте их Документ

0 голосов
/ 17 мая 2018

Попробуйте это. 

<div class='row'>
    <div ng-repeat="p in imageses" class="col-sm-4" >
        <img ng-src="{{p.path}}" class="rounded"/>
    </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...