Question

我有一个问题，我希望我的照片对齐如下：

并且它应该响应但我无法实现所需的帮助

这是我的源代码：

      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user scalable=no">
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

      <style>
          #img-one {
            float: right;
          }

          #img-three {
            float: right;
          }
      </style>
    </head>

    <body>
      <div id="Image-Section">
          <div id="img-one">
          <img src="one.jpg" alt="Image" class="img-responsive" width="631" height="390">
        </div>

        <div id="img-two">
          <img src="two.jpg" alt="Image" class="img-responsive" width="631" height="390">
        </div>

        <div id="img-three">
          <img src="three.jpg" alt="Image" class="img-responsive" width="631" height="390">
        </div>

        <div id="img-four">
          <img src="four.jpg" alt="Image" class="img-responsive" width="631" height="390">
        </div>
      </div>

      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </body>
    </html>

我使用bootstrap和css对齐了我的图片，它也是响应但是它的混乱

Answer 1

你可以试试这个，而不是像我一样在css中更改padding你应该在bootstrap自定义中更改它

演示：https://jsfiddle.net/2Lzo9vfc/173/

编辑：按钮https://jsfiddle.net/2Lzo9vfc/175/

<强> HTML

<div class="container text-center">
    <div class="row">
        <div class="col-sm-6">
           <img src="http://placehold.it/700x400" alt="" class="img-responsive"> 
        </div>
        <div class="col-sm-6">
            <img src="http://placehold.it/700x400" alt="" class="img-responsive">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
           <img src="http://placehold.it/700x400" alt="" class="img-responsive"> 
        </div>
        <div class="col-sm-6">
            <img src="http://placehold.it/700x400" alt="" class="img-responsive">
        </div>
    </div>
</div>

<强> CSS

.col-sm-6 {
  padding-left: 0;
  padding-right: 0;
}

Answer 2

<meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user scalable=no">
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

      <style>
          #img-one {
            float: right;
          }

          #img-three {
            float: right;
          }
          .img-xxx{
              width: 631px !important;
              height: 390px !important;
              }
      </style>
    </head>

    <body>
      <div id="Image-Section">
          <div class="row">
          <div id="" class="col-sm-5">
              <img src="images/logo.png" alt="Image" class="img-responsive img-xxx" >
        </div>

        <div id="img-two" class="col-sm-5">
            <img src="images/man1.jpg" alt="Image" class="img-responsive img-xxx">
        </div>
          </div>
          <div class="row">
        <div id="" class="col-sm-5">
            <img src="images/man2.jpg" alt="Image" class="img-responsive img-xxx">
        </div>

        <div id="img-four" class="col-sm-5">
            <img src="images/man3.jpg" alt="Image" class="img-responsive img-xxx">
        </div>
          </div>
      </div>

      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </body>
    </html>

试试这个

如何使4张图片组合起来

2 个答案: