0

基本的に、私がやりたいことは、ブラウザー ウィンドウのサイズを変更し、divそれに応じてサイズ変更の内容を変更できるマークアップを作成することです。

画面幅を大きくすると、レイアウトは次のようになります。 より大きな幅

画面幅を狭くした場合のレイアウトは次のようになります。 スキニー幅

フォントサイズはすべて同じままでかまいません。

私が苦労しているのは、それに応じてレイアウトを変更し、幅が縮小されたときにアバターを 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>

誰か考えはありますか？これは、これをスタイリングするハック的な方法が多すぎるようです。

4

2 に答える 2

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 に答える
0

分割のサイズを定義するために、px ではなく % で div の遊びを使用している場合。% は画面に対する相対値であり、px はコンテキスト内で固定されているためです。

于 2012-07-04T06:43:58.433 に答える