Question

我想创建这样的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-submenu放在同一行。我试图设置float：left为div-title和float：right为div-submenu但是这些div然后从div-menu获取空间。

Answer 1

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

Answer 2

我想出了这个，希望它有所帮助。

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

Answer 3

<!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元素中使用border等，并且遇到了float Contament问题，我在此处记录了几个修复：http://notes.susam.in/2011/06/float-containment.html

Answer 4

看看这个例子

http://jsfiddle.net/PjYF8/

如何正确对齐Div

4 个答案: