web-dev-qa-db-ja.com

HTMLで3つのdivを水平に配置するにはどうすればよいですか？

水平方向に3つの部門があるサンプルWebサイトを作成しています。一番左のdivを25％幅、真ん中のdivを50％幅、右に25％幅にして、分割がすべての100％スペースを水平に埋めるようにします。

<html>
    <title>
    Website Title
    </title>

    <div id="the whole thing" style="height:100%; width:100%" >

        <div id="leftThing" style="position: relative; width:25%; background-color:blue;">
            Left Side Menu
        </div>

        <div id="content" style="position: relative; width:50%; background-color:green;">
            Random Content
        </div>

        <div id="rightThing" style="position: relative; width:25%; background-color:yellow;">
            Right Side Menu
        </div>

    </div>
</html>

http://imgur.com/j4cJ

このコードを実行すると、divが互いの上に表示されます。私はそれらを隣り合わせに表示したいです！

これどうやってするの？

htmlcsslayoutposition
49
Akhil

この種のものにフロートを使用することは控えたい。 inline-blockを使用したいです。

さらに考慮すべき点：

  • インラインスタイルは保守性が悪い
  • セレクター名にスペースを入れないでください
  • <head>や<body>など、いくつかの重要なHTMLタグを見逃した
  • doctypeが含まれていませんでした

ドキュメントをフォーマットするより良い方法は次のとおりです。

<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
    <div id="left">Left Side Menu</div>
    <div id="middle">Random Content</div>
    <div id="right">Right Side Menu</div>
</div>
</body>
</html>

jsFiddle が適切な尺度です。

33
Jezen Thomas

これは非常に古い質問です。 FlexBox を使用してこの問題を解決したので、ここに投稿してください。ここに解決策があります

#container {
  height: 100%;
  width: 100%;
  display: flex;
}
#leftThing {
  width: 25%;
  background-color: blue;
}
#content {
  width: 50%;
  background-color: green;
}
#rightThing {
  width: 25%;
  background-color: yellow;
}
<div id="container">

  <div id="leftThing">
    Left Side Menu
  </div>

  <div id="content">
    Random Content
  </div>

  <div id="rightThing">
    Right Side Menu
  </div>

</div>

display:flexをコンテナに追加する必要がありました！フロートは不要です。

21
Maaz Syed Adeeb

floating elements を次のように使用できます。

<div id="the whole thing" style="height:100%; width:100%; overflow: hidden;">
    <div id="leftThing" style="float: left; width:25%; background-color:blue;">Left Side Menu</div>
    <div id="content" style="float: left; width:50%; background-color:green;">Random Content</div>
    <div id="rightThing" style="float: left; width:25%; background-color:yellow;">Right Side Menu</div>
</div>

親コンテナ上のoverflow：hidden;に注意してください。高さ0）。

11
Paul Aldred-Bann

最も簡単な方法
質問が回答されたことがわかります。今後この質問を抱えている人のためにこの回答をしています。

インラインcssをコーディングすることはお勧めできません。また、すべての内部divに対してID、常にスタイリングにclassを使用してください。 。プロのWebデザイナーになろうとしている場合、インラインcssの使用は非常に悪い習慣です。

ここであなたの質問で私は親divのラッパークラスを与えました、そして、すべての内側のdivはCSSの子divです。あなたはnth-childセレクターを使って内側のdivを呼び出すことができます.

ここでいくつかのことを指摘したい

1-インラインCSSを使用しないでください（非常に悪い習慣です）

2-idの代わりにクラスを使用してみてください。idを指定すると1回しか使用できませんが、クラスを使用すると何度も使用でき、そのクラスを使用してスタイルを設定できるため、コードの記述が少なくなります。

私の答えのためのコードペンリンク

https://codepen.io/feizel/pen/JELGyB

            .wrapper{width:100%;}
            .box{float:left; height:100px;}
            .box:nth-child(1){
               width:25%;
               background-color:red; 
        
            }
            .box:nth-child(2){
               width:50%;
              background-color:green; 
            }
            .box:nth-child(3){
               width:25%;
              background-color:yellow; 
            } </ code>
 
    <div class="wrapper">
        <div class="box">
        Left Side Menu
        </div>
        <div class="box">
        Random Content
        </div>
        <div class="box">
        Right Side Menu
        </div>
    </div>
 10 
Faizal Munna
あなたが追加します
float: left;

3つの要素のスタイルに合わせて、親コンテナが
overflow: hidden; position: relative;

これにより、フロートが実際のスペースを占めるようになります。
<html>
    <head>
        <title>Website Title </title>
    </head>
    <body>
        <div id="the-whole-thing" style="position: relative; overflow: hidden;">
            <div id="leftThing" style="position: relative; width: 25%; background-color: blue; float: left;">
                Left Side Menu
            </div>
            <div id="content" style="position: relative; width: 50%; background-color: green; float: left;">
                Random Content
            </div>
            <div id="rightThing" style="position: relative; width: 25%; background-color: yellow; float: left;">
                Right Side Menu
            </div>
        </div>
    </body>
</html>

また、幅：100％および高さ：100％をコンテナから削除する必要があることに注意してください。そうしないと、3番目のブロックが2行目に折り返されます。
 5 
NKCSS
position:relative;を取り除き、float:left;およびfloat:right;に置き換えます。
Jsfiddleの例： http://jsfiddle.net/d9fHP/1/
        <html>
<title>
Website Title </title>
<div id="the whole thing" style="float:left; height:100%; width:100%">
    <div id="leftThing" style="float:left; width:25%; background-color:blue;">
         Left Side Menu
    </div>
    <div id="content" style="float:left; width:50%; background-color:green;">
         Random Content
    </div>
    <div id="rightThing" style="float:right; width:25%; background-color:yellow;">
         Right Side Menu
    </div>
</div>
</html>​

 1 
MNilson