0

いくつかのユーザー情報が投稿の左側にあり、次に投稿自体がある典型的なフォーラムの投稿のように見せたいと思っています。別の div にラップされた 2 つの div を使用してから、css で float を使用しました。私の問題は、他の div もフローティングされている場合、他の div の「すぐ隣」ではなく、左にとどまりたいということです。divを試してみdisplay:inline;ましたが、代わりにスパンに変更しました。私が持っている最も近いものは、他のdivの上部のみが適切な場所にあることです(このdivをフロートしない場合、最初のもののみ)。典型的な IPB ポスト レイアウトを考えてみましょう。それが意味をなさない場合、ここに私のコードがあります:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<div id = "contentarea">
    <div class = "post">
        <div class = "head">
            <p class = "name">asrockw7</p>
        </div>
        <div class = "body">
            <p class = "title">On the Origin of Species</p>
            <p class = "content">Integer hendrerit lectus sit amet turpis facilisis quis lacinia nulla tempus. Aliquam vitae ante eu sem vestibulum scelerisque. Cras dui neque, auctor eget rhoncus non, pretium a justo. </p>
        </div>
        <div class = "clear">clear:both;</div>
        <div class = "allreplies">
            <div class = "reply">
                <p class = "name">Wafer</p>
                <p class = "content">Vestibulum nec turpis eu mi imperdiet porttitor. Fusce eget lorem libero, a imperdiet sem. Integer eleifend tincidunt condimentum. Nam id arcu nec lectus rhoncus sagittis.</p>
            </div>
            <div class = "reply">
                <p class = "name">Arondight</p>
                <p class = "content">Suspendisse non eros orci, a porttitor lacus. Donec vulputate viverra neque, quis sagittis eros suscipit vel.</p>
            </div>
        </div>
        <div class = "clear">clear:both;</div>
    </div>
</div>
</html>

<style type = "text/css">
.clear {
background:white;
clear:both;
}
#contentarea {
margin-top:50px;
margin-left:10px;
min-width:700px;
}
p{
font-family:"Lucida Console";
}
.post {
opacity:0.9;
background:blue;
padding:5px 10px 5px 10px;
}
.post .head {
background:red;
float:left;
}
.post .body {
background:green;
}

.post .allreplies {
background:yellow;
}
</style>

色は、各パーツを他のパーツと区別できるようにするためのものです。これは、bodydivがdivの隣に収まるとは思わないためであると考えたため、head下がりました。幅と高さを明示的に指定して、bodyそれが収まることを div に知らせることもできますが、解像度の大きいモニターを使用しているユーザーには不向きです。この時点で、私は<table>.

これらはすべて PHP によって生成されたもので、最初にレイアウトを正しくしたかっただけです。

tl;dr: 基本的には、headdiv とbodydiv を隣接させたいbodyと思っています。

4

1 に答える 1

1

x%に幅.headと(100-x)%幅を追加できます.body。また、以前と同じように追加float:leftすることもでき.bodyます。フィドルを参照してください。

あなたが今持っている方法では、.head要素は左上のスペースを占有し、.body(フローティングされていない) コンテンツを右に押し込んでいます。

フローティング div の幅を指定しない場合、.bodydiv の幅は と の最小値にthe width of the content inside the divなりthe width of the parentます。この場合、コンテンツの「幅」は親要素の幅よりも大きいため、.bodydiv は独自の水平線にプッシュされます。とfloat:leftの両方がある場合、 にそれほど多くのテキストがなくても正しく動作します。.head.body.content

于 2012-08-12T08:51:50.513 に答える