【问题标题】：Responsive two-column floated list响应式两列浮动列表
【发布时间】：2012-07-04 14:52:44
【问题描述】：

基本上我想做的是创建一些标记，允许我调整浏览器窗口的大小，并相应地调整 div 的内容。

以下是屏幕宽度较大时的布局：

以下是在更窄的屏幕宽度下的布局：

字体大小可以保持不变。

我遇到的困难是让布局进行相应的更改，并在缩小宽度时让头像从 80 像素缩小到 50 像素。

我的头像被包裹在里面

<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>

有什么想法吗？这似乎是一种过于 hack-ish 的样式化方式。

【问题讨论】：

您是想将其用于不同的设备还是仅用于 PC？
好吧，理想情况下是其他设备，但这很容易通过媒体查询来支持。 961px 及以上是较大的屏幕截图，而较小的屏幕截图是 320px 宽。
我猜你可以使用 JavaScript 或 jquery 检测窗口宽度来实现。
没错，但我认为我最苦恼的是 CSS 方面。

标签： html css css-float responsive-design media-queries

【解决方案1】：

如果您使用 div 的 play with % inspite of px 来定义分区的大小。因为 % 是相对于屏幕的，而 px 在上下文中是固定的。

【讨论】：

【解决方案2】：

这段代码应该做你需要的：

<!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>

【讨论】：