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

Question

私は長い間 CSS で遊んでおらず、現時点ではリファレンスがありません。私の質問はかなり簡単なはずですが、グーグルでは十分な答えが得られません。それで、集合知に加えて...

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

それが私のレイアウトになりたいものです。見出しはともかく。サブタイトルにサブレフトとサブライトを含める必要がありました。div が別の div の属性によってバインドされるようにするために使用する CSS ルールは何ですか。この場合、サブ左とサブ右がサブタイトル内にとどまるようにするにはどうすればよいですか?

score 65 · Accepted Answer

clear:both実際には必要ないのに、一番下に divが必要だというのはよくある誤解です。フォクシーの答えは正しいですが、非意味的で役に立たないクリア div は必要ありません。overflow:hiddenコンテナにを貼り付けるだけです。

#sub-title { overflow:hidden; }

score 35 · Accepted Answer

フロートするsub-leftとsub-right、内のスペースを占有しなくなりますsub-title。style = "clear: both"含まれている div を展開するには、その下に別の 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;
}

score 9 · Accepted Answer

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

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

score 9 · Accepted Answer

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

<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 つの列だけを制御することもできます。

score 5 · Accepted Answer

この答えは、次のような最後の文に対処するための上記の解決策に追加されます。

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

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

これを行うには、終了divを定義するCSSステートメントを含めます（使用されているFloat宣言に応じて、両方ではなくClearLeftまたは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の投稿にありました。SimpleClearingof FLoatsであり、456bereastreetにも適切な説明があります。記事CSSのヒントとコツパート2。もちろん非常にエレガントではありませんが、クロージングdivクラッジは問題なく機能するため、これらのソリューションを自分で実装するには怠惰すぎることを認める必要があります。だから、これから私の行為を片付けるために努力します。

score 3 · Accepted Answer

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

IronMyers レイアウト

もっともっともっと

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

#subleft,#subright{
     width:50%;
}

score -1 · Accepted Answer

-1

#sub-left, #sub-right
{
    display: inline-block;
}

于 2014-02-26T00:16:12.433 に答える

score -1 · Accepted Answer

Bootstrap Gridを介して、クロスブラウザー互換のソリューションを簡単に入手できます。

<div class="container">     
  <div class="row">
    <div class="col-sm-6" style="background-color:lavender;">
      Div1       
    </div>
    <div class="col-sm-6" style="background-color:lavenderblush;">
          Div2
    </div>
  </div>
</div>

jsfiddle: http://jsfiddle.net/DTcHh/4197/

score -1 · Accepted Answer

ひょっとして、こんなことも…。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style>
            #container
            {
                width:600px;
            }

            #head, #sub-title
            {
                width:100%;
            }

            #sub-left, #sub-right
            {
                width:50%;
                float:left;
            }

        </style>
    </head>

    <body>
        <div id="container">
            <div id="head">
                 #head
            </div>
            <div id="sub-title">
                #sub-title
                <div id="sub-left">
                    #sub-left
                </div>

                <div id="sub-right">
                    #sub-right
                </div>
            </div>
        </div>
    </body>
</html>

score -6 · Accepted Answer

次のようにします。

<table>
   <tr>
      <td colspan="2">TITLE</td>
   </tr>
   <tr>
      <td>subleft</td><td>subright</td>
   </tr>
</table>

簡単 - 入力するのに 1 分かかりました。CSS ファイルをクライアントにダウンロードする必要があることを忘れないでください。余分なタグについて混乱する心配はありません。この場合は関係ありません。

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

12 に答える 12

IronMyers レイアウト

もっともっともっと

Related

Reference