Question

在下面的html代码中，我创建了一个有两列的行。第一列我有一个图像，第二列我有我的标题和段落。

    <div class="row">
          <div class="col-6">
              <img src="image/beds.jpg" alt="">
          </div>

          <div class="col-6">
              <h2>Nevex has the experiencce</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates velit, inventore praesentium. Delectus nulla, voluptates excepturi earum minima eligendi cumque ullam, opdfgdtio nostrum ipsa maiores cupiditate facilis sint debitis aliquid. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia id beatae nostrum ducimus possimus, odit eligendi fuga perspiciatis placeat nisi facilis unde adipisci illo fugit doloremque, at porro magni, perferendis?</p>
          </div>

      </div>

接下来是我的造型代码：

    .row {
     margin: 0 -10px;
     margin-bottom: 10px;
     }
     .row:last-child {
     margin-bottom: 0;
     }
     [class*="col-"] {
      padding: 10px;
     }
     @media all and ( min-width: 600px ) {
     .row {
     display: table;
     table-layout: fixed;
     width: 100%;
     }
     [class*="col-"] {
      display: table-cell;
     }    
    .col-1{
     width:100%;
     }
    .col-6{
     width:50%;
     }
    }

如何通过响应性改变图像的大小并对齐两列的内容？这意味着图像在高度方面会略微减少，而另一列的内容也会在div的中间。

Answer 1

一种解决方案是使用图像作为该div的背景，一旦你这样做，就可以给它一个宽度：100％。

如果您使用的是bootstrap，可以添加class =“img-responsive”，它会自动适应屏幕的宽度

如何在css中对齐列内容

1 个答案: