CSS：

Question

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

任何想法？这看起来像是一种破解风格的太多方式。

Answer 1

如果你正在使用div的游戏而不是px来定义分区的大小。由于％是相对于屏幕的，因此px在上下文中是固定的。

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

响应式双列浮动列表

CSS：

HTML：

2 个答案: