Question

我想在同一行显示三张图片

因为我正在使用

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

这只是在一行中只显示一个图像，我希望每行显示三个图像

Answer 1

试试这个。

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

Answer 2

 <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>

Answer 3

基本结构应如下：

<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>

为了更好地说明，请查看他们的doc

无法在每行三对齐图像

3 个答案: