文章/答案/技术大牛

发布

社区首页 >问答首页 >响应两列浮动列表

问响应两列浮动列表
EN

Stack Overflow用户

提问于 2012-07-04 06:13:11

回答 2查看 566关注 0票数 0

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

在更大的屏幕宽度下，布局应该是什么样的：

下面是布局在较细的屏幕宽度上的样子：

字体大小可以保持不变。

我有一个困难的时间是让布局相应地改变，并使化身从80‘m下降到50’m时宽度缩小。

我把我的头像包在里面

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

有人有什么想法吗？这看起来太像一种黑客风格的方式了。

css

css-float

responsive-design

media-queries

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-07-04 06:43:58

如果您使用div的play with %，尽管使用px来定义师的大小。因为%相对于屏幕和px是固定在上下文中的。

票数 0

Stack Overflow用户

发布于 2012-07-04 06:58:24

这段代码应该能满足您的需要：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11323364

复制

相似问题

问响应两列浮动列表
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问响应两列浮动列表EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问响应两列浮动列表
EN