響應式div不會縮放

Question

因此，我有兩個彼此相鄰的div，其類別爲.category，它們應該是響應式的。

<div class="content"> 
    <div class="category"> 
     <img src="images/category1.jpg" alt="" /> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor. 
     </p> 
    </div 
    <div class="category"> 
     <img src="images/category2.jpg" alt="" /> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. 
     </p> 
    </div> 
</div> 

這是我的CSS：

.content { 
    width: 100%; 
    background: red; 
} 

.category { 
    max-width: 470px; 
    background: #ffffff; 
    display: inline-block; 
    vertical-align: top; 
    position: relative; 
} 

當我開始調整窗口大小，第二.category塊移動第一.category板塊下面。但是，我希望.category塊的寬度減小並保持相鄰。

有人有什麼建議嗎？

Answer 1

首先，您的HTML標記中有一些印刷錯誤（您在第一個類別div的閉合div標記中缺少>標誌）。

其次，你應該使用百分比寬度爲這樣的反應元素：

FIDDLE

CSS：

.content { 
    width: 100%; 
    background: red; 
} 

.category { 
    max-width:470px; 
    width: 50%; 
    background: #ffffff; 
    float:left; 
    vertical-align: top; 
    position: relative; 
} 

Answer 2

添加float:left;在CSS中.category並請使用%或一個css媒體查詢

@media(min-width:something;){ 
    .category { 
     width: something; 
    } 
} 

設置元素的寬度。