如何在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中對齊列內容

回答

相關問題