如何在css中对齐列内容

在下面的html代码中，我创建了一个有两列的行。第一列是图像，第二列是我的标题和一个段落。如何在css中对齐列内容

<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的中间。

来源

2016-05-23 Wosley Alarico

了一张价值1000行代码，和的jsfiddle价值1000张图片:) – Narxx

不完全按照 –

如果你可以在网上发布一个工作示例，它会更容易玩弄，并了解问题。通过查看代码来发现问题要比想象的难得多:) – Narxx

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

如果使用的是引导，你可以添加类=“IMG响应”，它会自动适应屏幕宽度

来源

2016-05-23 14:45:50

我正在使用这种情况下的媒体查询。 –

当时看到class =“col-6”我以为bootstrap。那么，另一种解决方案是创建不同屏幕尺寸的媒体查询，并将图片宽度：100％。但是，您必须指定包含它的div的宽度 – 2016-05-23 15:01:34

如何在css中对齐列内容

回答

相关问题