1

私は、いくつかの情報 (青いボックス) が次のように投稿の本文から取り出されるブログのレイアウトに取り組んでいます: http://jsfiddle.net/rhr96/

それをすることの最善は何ですか？

現在、私はやっています：

position: absolute;  
margin-left: negative value;

青いボックスを左に流します。

しかし、私もできる：

position: relative;  
float: left;
right: some px;

これらのどれがより良いと考えられますか? それとも他の方法はありますか？

4

2 に答える 2

1

これを行う最良の方法は、実際にはこれかもしれないと思います（まあ、私は最善を言います、ほとんどの場合、それは意見の問題だと思います）

HTML:

<div class="container">
    <div class="outside">
        hi
    </div>
    <div class="inside">
        <p>Blah blah blah</p>
    </div>
</div>

CSS:

.container { margin: 20px auto; width: 400px; }

.outside { background: #d8d8d8; float: left; margin: 0 5px 0 0; padding: 5px; }
.inside { background: #000; color: #fff; margin: 5px 0; overflow: hidden; }

明らかに、同じページでこれを複数回繰り返すことができます（これがブログ投稿の場合は可能だと思います）

編集:私の答えはfloats、通常のフローから要素を取り出すために使用しますoverflow: hidden。コンテンツでの使用は、フローティング要素の下にラップしないことを意味します。

(よくわからない場合は、それについて読むことoverflowをお勧めします。フロートのクリアなど、あらゆる種類のことに役立ちます)

于 2012-12-07T16:07:49.727 に答える
1

簡潔な答え：POSITION ABSOLUTE

理由: デザイナーが使用するposition: absoluteのは、通常のドキュメント フローから要素を取り出す正しい方法であるためです。使用するfloat: left;と、ドキュメント フローから青いボックスが取り出されません...

編集：あなたが実際に望んでいたことを理解しました.ここで私は新しい1を作りました.あなたはそれをチェックすることができます..

デモ

HTML

<div class="container">
    <div class="block">1</div>
    <div class="content">This is a question</div>
</div>

CSS

.container {
    height: 200px;
    width: 500px;
    border: 1px solid #eeeeee;
    margin: 30px;
    position: relative;
    font-family: Arial;
}

.block {
    position: absolute;
    height: 80px;
    width: 60px;
    background-color: #eeeeee;
    top: 10px;
    left: 10px;
    font-size: 36px;
    text-align: center;
}

.content {
    width: 410px;
    float: right;
    margin: 10px;
    font-size: 18px;
}
于 2012-12-07T15:13:09.237 に答える