web-dev-qa-db-ja.com

2つのdivを別のdiv内で水平に配置する方法

私はCSSを長い間使っていませんでしたが、現時点では参照がありません。私の質問はかなり簡単なはずですが、グーグルでは十分な答えが得られません。それで、集合的な知識に加えて...

|#header---------------------------------------------------------------|
|                               TITLE                                  |
|#sub-title------------------------------------------------------------|
|bread > crumb                    |                  username logout   |
|#sub-left                        |                          #sub-right|
|---------------------------------|------------------------------------|

それが私のレイアウトにしたいことです。とにかく見出し。サブタイトルにサブレフトANDサブライトを含めるようにしました。 divが別のdivの属性によってバインドされることを保証するためにどのCSSルールを使用しますか。この場合、サブレフトとサブライトがサブタイトル内に収まるようにするにはどうすればよいですか？

csslayouthtml
56
Josh Smeaton

本当に必要ないのに、一番下にclear:both divが必要だという誤解はよくあります。 foxyの答えは正しいですが、セマンティックではない、役に立たないクリアdivは必要ありません。必要なことは、overflow:hiddenをコンテナに貼り付けるだけです。

#sub-title { overflow:hidden; }
65
Darko Z

sub-leftとsub-rightをフロートすると、sub-title内のスペースを占有しなくなります。含まれるdivを展開するには、その下にstyle = "clear: both"を持つ別のdivを追加する必要があります。

HTML：

<div id="sub-title">
   <div id="sub-left">
      sub-left
   </div>
   <div id="sub-right">
      sub-right
   </div>
   <div class="clear-both"></div>
</div>

CSS：

#sub-left {
   float: left;
}
#sub-right {
   float: right;
}
.clear-both {
   clear: both;
}
36
foxy

Darko Zが＃sub-titleに「overflow：hidden」を適用することに同意します。ただし、フロートをクリアするoverflow：hiddenメソッドは、幅または高さを指定しない限りIE6では機能しないことに注意してください。または、幅または高さを指定したくない場合は、「ズーム：1」を使用できます。

#sub-title { overflow:hidden; zoom: 1; }
9
Justin Lucente

これはあなたが探していることをするはずです：

<html>
    <head>
        <style type="text/css">
            #header {
                text-align: center;
            }
            #wrapper {
                margin:0 auto;
                width:600px;
            }
            #submain {
                margin:0 auto;
                width:600px;
            }
            #sub-left {
                float:left;
                width:300px;
            }
            #sub-right {
                float:right;
                width:240px;
                text-align: right;
            }
        </style>

    </head>
    <body>
        <div id="wrapper">
            <div id="header"><h1>Head</h1></div>
            <div id="sub-main">
                <div id="sub-left">
                    Right
                </div>
                <div id="sub-right">
                    Left
                </div>
            </div>
        </div>
    </body>
</html>

また、ラッパークラスを使用してドキュメント全体を制御することも、サブメインクラスを使用して2つの列のみを制御することもできます。

9
csexton

この回答は、上記の解決策に追加され、最後の文章に対処します。

サブタイトル内にサブレフトとサブライトが確実に収まるようにするにはどうすればよいですか

問題は、サブレフトまたはサブライトのコンテンツが拡張すると、サブタイトルの下に拡張されることです。この動作はCSSに組み込まれていますが、ほとんどの人にとって問題を引き起こします。最も簡単な解決策は、CSS Clear宣言でスタイル設定されたdivを持つことです。

これを行うには、終了divを定義するCSSステートメントを含めます（使用されているFloat宣言に応じて、両方ではなくClear LeftまたはRIghtになります：

#sub_close {clear:both;}

HTMLは次のようになります。

<div id="sub-title">
<div id="sub-left">Right</div>
<div id="sub-right">Left</div>
<div id="sub-close"></div>
</div>

申し訳ありませんが、これは以前に投稿されたことに気づきました。返信を入力している間にコーヒーを飲んではいけませんでした！

@Darko Z：あなたは正しいです、私が見つけたoverflow：auto（またはoverflow：hidden）ソリューションの最良の説明は、少し前にSitePointの投稿にありました Simple Clearing of FLoats and thereまた、456bereastreetの記事 CSSのヒントとコツパート2 の適切な説明。これらの解決策を自分で実装するにはあまりにも怠toであることを認めなければなりません。だから、私の行動をきれいにするために、これから努力します。

5
James Piggot

これらのいくつかを真剣に試し、固定幅またはより流動的なレイアウトを選択できます。選択はあなた次第です！実装も本当に簡単です。

IronMyersのレイアウト

もっともっともっと

3
inspite

YUI Grids や Blue Print CSS などのCSS Gridsフレームワークを使用してこれを実現することもできます。クロスブラウザの問題の多くを解決し、単なる人間の使用のために、より洗練された列レイアウトを可能にします。

0
csexton

Css3を使用した最良かつシンプルなアプローチ

#subtitle{
/*for webkit browsers*/
     display:-webkit-box;
    -webkit-box-align:center;
    -webkit-box-pack: center;
     width:100%;
}

#subleft,#subright{
     width:50%;
}
0
Konga Raju