70

横3分割のサンプルサイトを作成しています。左端の 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/j4cJu

このコードを実行すると、div が重なり合って表示されます。並んで登場してほしい！

これどうやってするの？

4

6 に答える 6

50

この種の目的でフロートを使用することは控えたいと思います。私はむしろ使用したいinline-block。

考慮すべきその他のポイント:

  • インライン スタイルは保守性が悪い
  • セレクター名にスペースを含めないでください
  • <head>やなどの重要な HTML タグがいくつかありませんでした<body>
  • 含まれていませんでした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です。

于 2012-08-13T09:21:06.810 に答える
40

私はこれが非常に古い質問であることを知っています。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コンテナに追加するだけでした！フロートは必要ありません。

于 2016-10-24T03:07:22.883 に答える
19

次のように浮動要素を使用できます。

<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>

オーバーフローに注意してください: hidden; 親コンテナでは、親が子要素と同じサイズになるようにします (そうしないと、高さが 0 になります)。

于 2012-08-13T09:09:22.197 に答える
11

Most easiest way
I can see the question is answered , I'm giving this answer for the ones who is having this question in future

Its not good practise to code inline css , and also ID for all inner div's , always try to use class for styling .Using inline css is a very bad practise if you are trying to be a professional web designer.

here in your question I have given a wrapper class for the parent div and all the inside div's are child div's in css you can call inner div's using nth-child selector.

I want to point few things here

1 - Do not use inline css ( it is very bad practise )

2 - Try to use classes instead of id's because if you give an id you can use it only once, but if you use a class you can use it many times and also you can style of them using that class so you write less code.

codepen link for my answer

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; 
            }


 
    <div class="wrapper">
        <div class="box">
        Left Side Menu
        </div>
        <div class="box">
        Random Content
        </div>
        <div class="box">
        Right Side Menu
        </div>
    </div>
于 2017-02-01T17:21:37.857 に答える
8

を追加します

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 行目に折り返されます。

于 2012-08-13T09:12:28.030 に答える
1

を取り除き、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>​
于 2012-08-13T09:12:47.687 に答える