выравнивание нескольких делений - слева, по центру и справа - PullRequest
Новая
       1

выравнивание нескольких делений - слева, по центру и справа

1 голос
/ 23 января 2011

Мой веб-сайт выглядит так: 

[left div][          center div         ][right div]
          [                             ][right div]
          [                             ]
          [                             ]
          [                             ]
          [                             ]

Если я попытаюсь добавить еще один div слева, он будет выглядеть так: 

[left div]
[        ]
[left div][          center div         ][right div]
[        ][                             ][right div]
[        ][                             ]

Мой css: 

    #left{
    width: 140px;
    height: auto;
    float: left;
    clear: left;
    }

    #center{
    float: left;
    width:600px;
    padding: 10px;
    }

    #right {
    float: right;
    height: auto;
    width: 140px;
    }

Как мне сделать так, чтобы это выглядело 

[left div][          center div         ][right div]
[        ][                             ][right div]
[left div][                             ]
[        ][                             ]
[        ][                             ]
[left div][                             ]

Ответы [ 3 ]

2 голосов
/ 23 января 2011

вы можете использовать что-то вроде следующего:

HTML 

<div id="wrapper">
    <div class="left"></div><div class="center"></div><div class="right"></div>
    <div class="left"></div> <div class="right"></div>
  </div>

CSS 

   #wrapper {width:886px; overflow:hidden}
  .left {float:left; width:140px; height:200px; background:red;border:1px solid black;}
  .right {float:right;width:140px; height:200px; background:blue;border:1px solid black;}
  .center {float:left;width:600px; height:200px; background:grey;border:1px solid black;}

живой пример: http://jsbin.com/eroka5/2

1 голос
/ 26 января 2011

Чтобы объяснить идею: вы не можете использовать «clear: left» для div: left здесь, потому что это создаст новую строку между 2 «left» div.

Я думаю, что вы лучшеставка заключается в том, чтобы создать «обертку»: левую обертку, центральную обертку и правую обертку (то же самое слева, справа и в центре выше).Затем вы можете поместить child-div в "left-wrapper", ширину 100%, без плавающих элементов.

0 голосов
/ 23 января 2011

Вот мой пример кода, который достигает этой цели. 

<html>
<head>
<style>
#left,#center,#right{
width:33%;
float:left;
}
#bottomleft,#bottomright
{
width:50%;
float:left;
}

</style>
</head>
<body>
<div width="1024px"> 
 <div id="left">left</div><div id="center">center</div><div id="right">right</div>
<div>
<div>
 <div id="bottomLeft" >bottomleft</div> <div id="bottomright">bottomright</div>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...