基本上我想要做的是創建一些標記，允許我調整瀏覽器窗口的大小和div的內容相應的調整大小。響應兩列浮動列表

這裏的佈局應該是什麼樣子，在更大的屏幕寬度： larger width http://i48.tinypic.com/rshcax.jpg

這裏的佈局應該是什麼樣子，在一個瘦屏幕寬度： skinnier width http://i46.tinypic.com/2yo7l2x.jpg

字體大小都可以保持原樣。

我很難與正在得到的佈局相應地改變，並獲得頭像縮放寬度從80px縮小到50px。

我有我的頭像圖片包裹在

<div class="comments-avatar"> 
    <img src="#" /> 
</div>

元信息和評論的文本被包裹在

<div class="comments-content"> 
    <div class="comments-meta"> 
     <div class="comments-text"></div> 
    </div> 
</div>

的.comments-avatar類是浮動左側，.comments-content浮動權。除此之外，我假設我需要使用CSS媒體查詢。我知道如何做到這一點，我想我正在努力與需要設置百分比有關嗎？

任何想法使這個標記儘可能簡單（甚至比我想要做的更簡單）將非常感激。

這是我迄今爲止的代碼明智的。我並不完全滿意。好像比必要更多的代碼...

CSS：

#comments { 
    padding: 20px 0 0 0; 
    border-top: 1px solid @clr-1; 

    ol.commentlist { 
     margin: 35px 0 50px 0; 
     padding: 0; 
     list-style: none; 

     li { 
      padding: 0 0 52px 5px; 

      .comment-avatar { 
       width: 11%; 
       min-width: 50px; 
       float: left; 
       padding: 0 10px 0 0; 

       .avatar { 
        margin-top: -2px; 
        width: 100%; 
        height: auto; 
        min-width: 50px; 
        max-width: 80px; 
       } 
      } 

      .comment-content { 
       width: 100%; 

       .comment-meta { 
        font-size: 1.8em; 
        padding: 4% 0; 
       } 

       > p { 
        margin: 22px 0; 
     } 
      } 
     } 
    } 
} 

@media only screen and (min-width:961px) { 
    .comment-content { 
     width: 87%; 
     float: right; 
    } 

    .comment-meta { 
     padding: 0; 
    } 
}

HTML：

<div id="comments"> 
    <ol class="commentlist"> 
     <li> 
      <div class="comment-avatar"> 
       <img src="avatar/image/here.jpg" /> 
      </div> 

      <div class="comment-content"> 
       <div class="comment-meta"> 
        Posted on July 30, by admin. 
       </div> 

       <p>Paragraph text here...</p> 
       <p>Paragraph text here...</p> 
      </div> 
      <div class="clear"></div> 
     </li> 
    </ol> 
</div>

任何想法的人？這看起來像是太多的黑客風格的樣式。

來源

2012-07-04 kaffolder

你嘗試使用不同的設備或只是PC？ – Dips

那麼，理想情況下，其他設備，但很容易通過媒體查詢支持。寬度爲961px，較大的截圖爲較小的截圖，寬度爲320px。 – kaffolder

我想你可以使用JavaScript或jQuery檢測窗口寬度來實現這一點。 – Dips

如果您正在使用div的玩法，儘管使用px來定義分區的大小。由於％相對於屏幕而言，px在上下文中是固定的。

來源

2012-07-04 06:43:58 test

此代碼應該做你需要的東西：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    html,body{ 
     padding:0; 
     margin:0; 
    } 

    .lpanel{ 
     float:left; 
     width:50px; 
     height:50px; 
     background-color:red; 
    } 

    .rpanel{ 
     margin-left:50px; 
    } 

    @media screen and (max-width:400px){ 
     .rpanel{ 
      margin-left:0; 
     } 
    } 
</style> 
</head> 
<body> 
    <div class="lpanel"> 
    </div> 
    <div class="rpanel"> 
      Some long text 
     </div> 
</body> 
</html>

來源

2012-07-04 06:58:24

響應兩列浮動列表

CSS：

HTML：

回答

相關問題