0

基本上我想要做的是创建一些标记，允许我调整浏览器窗口的大小以及相应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的样式化方式。

4

2 回答 2

0

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

于 2012-07-04T06:43:58.433 回答
0

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

<!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-04T06:58:24.910 回答