0

親 div タグに 3 つの div タグを表示したい 親 div には幅と高さがありません 1 つの内側の div は固定幅と高さで左側に配置されます 2 つ目の内側の div は固定高さのみで中央に配置され、その幅は他の 2 つの間にありますdiv タグ 3 番目の内部 div は右側になります

 css
   #container{}
 #columnright{

    float:left;
    width:200px;
    height: 400px;
 }    
 #content{
    margin-right:auto;
    margin-left:auto;
    height: 400px;
    }
 #columnleft{

    float:right;
    width:150px;
    height: 400px;
    }

 html
  <div id="container">
   <div id="columnright"></div>
   <div id="content"></div>
   <div id="columnleft"> </div>
  </div>
4

5 に答える 5

1 
 <style>

             #columnright
            {
                width: 200px;  
                height:400px;
    }

    #content
    {
    float: left;
    height: 400px;
    }

    #columnleft
    {
    float: right;
    width: 150px;
    height: 400px;
    }
</style>

<div id="container">
<div id="columnright"></div>
<div id="content"></div>
<div id="columnleft"></div>
</div>

上記のコードが役立つと思います。最初の内側の div では、right float : left にする必要はありません。Becoz u は、幅と高さを固定する必要があると言いました。float プロパティについて言及すると、スペースを占有しません。

于 2013-10-25T14:06:39.337 に答える
0

http://jsfiddle.net/hdrenollet/dsbSt/embedded/result/

私があなたを正しく理解していれば、あなたは次のようなものを探しています:

<head>
    <title></title>
    <script>
    </script>
    <style>
        #parent{
            width:100%;
        }
        #columnleft{
            position:relative;
            float:left;
            border: 1px solid black;
            top:0px;
            width:150px;
            height: 400px;
        }
        #content{
            position:relative;
            width:100%;
            top:0px;
            padding: 20px;
            margin-left:150px;
            margin-right:200px;
        }
        #columnright{
            border: 1px solid black;
            float:right;
            top:0px;
            width:200px;
            height: 400px;
        }
    </style>
</head>
<body>
  <div id="parent">
   <div id="columnleft"></div>
   <div id="columnright"></div>
   <div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lectus sem, lobortis fermentum eleifend non, interdum at orci. Ut nec mauris vulputate, eleifend elit vitae, suscipit felis. Etiam leo ligula, pellentesque non urna sed, sagittis hendrerit nibh. Sed pharetra pellentesque nunc vitae imperdiet. orci. Nam ac nisi sed ipsum ullamcorper aliquet eget lobortis enim. Duis consequat sed arcu vel vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis porttitor sapien. Duis a sodales justo. Mauris gravida aliquet nunc in scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel nunc sagittis, dapibus quam eu, congue magna.</div>
  </div>
</body>

コンテンツ コンテナーの margin-left と margin-right を左右の列の幅に設定する必要があります。

于 2013-10-25T14:07:20.723 に答える
0

コンテンツ div の幅を計算するには、 CSS3 のcalc()関数を使用する必要があります。ここを参照してください：

JSFiddle

また、理解しやすいように div に色を付けました。その時点で「columnright」は画面の左側にあり、その逆も同様であるため、おそらく div のままにしておく必要があります。

于 2013-10-25T14:07:33.503 に答える
0

これにより、何もフローティングせずに、やろうとしていることを達成できます。また、#columnright が実際には右側にあるように修正し、#columnleft が実際には左側にあるように修正しました。また、何が起こっているのかをわかりやすくするために、背景色を追加しました。

HTML

<div id="container">
    <div id="columnright"></div>
    <div id="content"></div>
    <div id="columnleft"> </div>
</div>

CSS

#container {
    position:relative;
    background-color:#E0E0E0;
}

#columnleft {
    position:absolute;
    top:0;
    left:0;
    width:150px;
    height: 400px;
    background-color:#CCCCE0;
}

#columnright {
    position:absolute;
    top:0;
    right:0;
    width:200px;
    height: 400px;
    background-color:#E0CCCC;
}    

#content {
    margin-right:200px;
    margin-left:150px;
    height: 400px;
    background-color:#CCE0CC;
}

フィドル

http://jsfiddle.net/mNnAq/

于 2013-10-25T14:08:04.133 に答える