Как правильно выровнять Div - PullRequest
Новая
       0

Как правильно выровнять Div

1 голос
/ 26 июля 2011

Я хотел бы создать такую ​​структуру Div 

--------div-container-------
----------div-menu----------
--div-title--|--div-submenu-


<div class="div-container">
  <div class="div-menu">
  </div>
  <div class="div-content">
     <div class="div-title"> 
     </div>
     <div class="div-submenu">
     </div> 
  <div>
</div>

Проблема в том, что я не знаю, как настроить div-menu, чтобы он занимал всю строку, а div-title и div-подменю помещались в одну строку. Я попытался установить float: left для div-title и float: right для div-подменю, но эти div затем занимают место в div-menu.

Ответы [ 4 ]

2 голосов
/ 26 июля 2011 
Div is a block element so it takes entire horizontal space 


And to make two divs come side by side use style "display:inline-block" for "div-title " and "div-menu" .
display:inline-block works for IE7 +/FF

For IE7 and below use below css to behave like inline-block
selector { 
    zoom:1;
   *display:inline;
}
0 голосов
/ 26 июля 2011

Посмотрите на этот пример

http://jsfiddle.net/PjYF8/

0 голосов
/ 26 июля 2011 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Test</title>
    <style type="text/css">
    .div-menu {
        background: #ccddee;
    }
    .div-title {
        float: left;
        background: #ddeeff;
        width: 50%;
    } 
    .div-submenu {
        float: right;
        background: #eeffff;
        width: 50%;
    } 
    </style>
  </head>
  <body>
    <div class="div-container">
      <div class="div-menu">
        Foo
      </div>
      <div class="div-content">
         <div class="div-title"> 
            Bar
         </div>
         <div class="div-submenu">
            Baz
         </div> 
      <div>
    </div>
  </body>
</html>

Если вам нужны границы и т. Д. В одном из элементов div контейнера, и вы столкнулись с проблемой локализации с плавающей точкой, я задокументировал пару исправлений здесь: http://notes.susam.in/2011/06/float-containment.html

0 голосов
/ 26 июля 2011

Я придумал это, надеюсь, это поможет.

http://jsfiddle.net/Xrqxc/12/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...