Question

我正在制作照片库，我想知道如何更好地包装图像以并排制作3张图片，将每张图片包装成 <div class="col-md-4">，或者我可以将所有图片放入

<div class="col-md-4">
   <img src="">
   <img src="">
  <img src="">
   <img src="">
</div>

什么是正确的方法？

Answer 1

试试这个

    <div class="col-md-4">
   <img src=""/>
</div>
   <div class="col-md-4">
   <img src=""/>
</div>
<div class="col-md-4">
   <img src=""/>
</div>

Answer 2

一个col-md-4中的所有图片：

.x {
    width: 25%;
    box-sizing: border-box;
    float: left;
}

img {
    width: 100%;
    height: 100px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-md-4">
   <div class="x"><img src="http://justcuteanimals.com/wp-content/uploads/2016/07/cute-funny-pug-life-shades-summer-dogs-puppy-animal-pictures.jpg"></div>
   <div class="x"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhsZRYQl-mSO-SY_VMRbWoeEycn9HbxKwqnI7IxOVb0eKJLpom"></div>
   <div class="x"><img src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg"></div>
   <div class="x"><img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg"></div>
</div>

如何正确地制作3张图像

2 个答案: