基本上我想要做的是创建一些标记，允许我调整浏览器窗口的大小和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：

回答

相关问题