Question

我有一个上传组件，可以在用户将其上传到服务器之前预览所选图像。

我想在桌面上最多显示3个，平板电脑上最多显示2个，手机上最多显示1个。

我不知道用户将上传多少张图片，因此它是动态量。

上传的一个示例会为4个文件生成类似的内容。

<div>
  <div>
     <div class="thumbnail">
       <div class="caption">
         <h3>
           <span>fixed_bug.png</span>
          </h3>
          <p>
            <a href="#" class="btn btn-danger btn-responsive">Delete</a>
          </p>
       </div>
       <img src="blob:http%3A//localhost%3A3030/62733983-bb74-494c-bd4e-7a66ccfcb463" class="img-thumbnail">
    </div>
  </div>
  <div>
    <div class="thumbnail">
      <div class="caption">
        <h3><span>obomber.jpg</span></h3>
        <p>
          <a href="#" class="btn btn-danger btn-responsive">Delete</a>
        </p>
      </div>
      <img src="blob:http%3A//localhost%3A3030/498e5d16-114e-41b5-8d4d-4e798c36861c" class="img-thumbnail">
    </div>
  </div>
  <div>
    <div class="thumbnail>
      <div class="caption">
        <h3><span>podcasts.png</span></h3>
        <p><a href="#" class="btn btn-danger btn-responsive">Delete</a></p>
      </div>
      <img src="blob:http%3A//localhost%3A3030/08a89a31-6822-4436-a8be-e89ddfee9f0f" class="img-thumbnail">
    </div>
  </div>
  <div>
    <div class="thumbnail">
       <div class="caption">
         <h3><span>tangents.png</span></h3>
         <p>
           <a href="#" class="btn btn-danger btn-responsive">Delete</a>
         </p>
       </div>
       <img src="blob:http%3A//localhost%3A3030/ae1c844f-f0d2-4a50-a0b1-c46b4c00a4ba" class="img-thumbnail">
      </div>
    </div>
  </div>

Answer 1

正如有些人在评论中所说的那样使用bootstrap网格系统，非常有用，这一切都可以通过使用这个来实现

http://getbootstrap.com/css/#grid

此时您可能会在手机上使用抱歉的内容可能很粗糙：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-6">
            <div class="thumbnail">
                <div class="caption">
                    <h3>
                     <span>fixed_bug.png</span>
                    </h3>
                    <p>
                      <a href="#" class="btn btn-danger btn-responsive">Delete</a>
                    </p>
                </div>
                <img src="blob:http%3A//localhost%3A3030/62733983-bb74-494c-bd4e-7a66ccfcb463" class="img-thumbnail">
            </div>
        </div>
        <div class="col-md-4 col-sm-6">
            <div class="thumbnail">
                <div class="caption">
                    <h3>
                     <span>fixed_bug.png</span>
                    </h3>
                    <p>
                      <a href="#" class="btn btn-danger btn-responsive">Delete</a>
                    </p>
                </div>
                <img src="blob:http%3A//localhost%3A3030/62733983-bb74-494c-bd4e-7a66ccfcb463" class="img-thumbnail">
            </div>
        </div>
        <div class="col-md-4 col-sm-6">
            <div class="thumbnail">
                <div class="caption">
                    <h3>
                     <span>fixed_bug.png</span>
                    </h3>
                    <p>
                      <a href="#" class="btn btn-danger btn-responsive">Delete</a>
                    </p>
                </div>
                <img src="blob:http%3A//localhost%3A3030/62733983-bb74-494c-bd4e-7a66ccfcb463" class="img-thumbnail">
            </div>
        </div>
    </div>
</div>

在桌面上动态对齐图像，在移动设备上动态对齐2

1 个答案: