将元素放在div的右侧

Question

我想知道如何将这些div放到白色div的右侧。 http://prntscr.com/5jmm6q

正如你所看到的，它堆叠在左边的div下面，我希望它位于右上方。 当我使用float：正确的，这里是我得到： http://prntscr.com/5jmo1p

这不是我想要的：/

这里是我的CSS代码：

#leftmenu { 
    margin-left:5px; 
    margin-top:5px; 
    height:auto; 
    width:150px; 
    background-color:gray; 
    padding:2px; 
} 

#leftmenu .titlebox { 
    height:20px; 
    width:150px; 
    background-color:black; 
} 

#leftmenu .titlebox .text { 
    margin-left:10px; 
    font-family:OswaldL; 
    font-size:14px; 
    color:white; 
} 

/*Now, here is the part that I want to move to the upper right side*/ 

#rightmenu { 
    margin-left:5px; 
    margin-top:5px; 
    height:auto; 
    width:250px; 
    background-color:gray; 
    padding:2px; 
} 

#rightmenu .titlebox { 
    height:20px; 
    width:250px; 
    background-color:black; 
} 

#rightmenu .titlebox .text { 
    margin-left:10px; 
    font-family:OswaldL; 
    font-size:14px; 
    color:white; 
} 

这里是HTML ：

<div id="base"> 
    <section style="color: black;"> 
     <div id="leftmenu"> 
      <div class="titlebox"><div class="text"><?php echo NOM_SITE;?></div></div> 
      <ul> 
       <li><a href="#">DATA</a></li> 
       <li><a href="#">DATA</a></li> 
       <li><a href="#">DATA</a></li> 
      </ul> 
     </div> 


     <div id="leftmenu"> 
      <div class="titlebox"><div class="text">MENU</div></div> 
      <ul> 
       <li><a href="#">DATA</a></li> 
       <li><a href="#">DATA</a></li> 
      </ul> 
      </div> 

     <div id="leftmenu"> 
      <div class="titlebox"><div class="text">MENU</div></div> 
      <ul> 
       <li><a href="#">DATA</a></li> 
      </ul> 
      </div> 



     <div id="rightmenu"> 
      <div class="titlebox"><div class="text">MENU</div></div> 
      <div class="droite_text"> 
       <li><a href="forum.php?id=1">DATA</a></li> 
      </div> 
     </div> 

     <div id="rightmenu"> 
      <div class="titlebox"><div class="text">MENU</div></div> 
      <div class="droite_text"> 
      DATA 
      </div> 
     </div> 

谢谢。 :)

Answer 1

位变化

<div id="base"> 
    <section style="color: black;"> 
     <!-- added new div here --> 
    <div class="leftMain"><div id="leftmenu"> 
      <div class="titlebox"><div class="text"><?php echo NOM_SITE;?></div></div> 
      <ul> 
       <li><a href="#">DATA</a></li> 
       <li><a href="#">DATA</a></li> 
       <li><a href="#">DATA</a></li> 
      </ul> 
     </div> 


     <div id="leftmenu"> 
      <div class="titlebox"><div class="text">MENU</div></div> 
      <ul> 
       <li><a href="#">DATA</a></li> 
       <li><a href="#">DATA</a></li> 
      </ul> 
      </div> 

     <div id="leftmenu"> 
      <div class="titlebox"><div class="text">MENU</div></div> 
      <ul> 
       <li><a href="#">DATA</a></li> 
      </ul> 
      </div> 

     </div> 

     <div id="rightmenu"> 
      <div class="titlebox"><div class="text">MENU</div></div> 
      <div class="droite_text"> 
       <li><a href="forum.php?id=1">DATA</a></li> 
      </div> 
     </div> 

     <div id="rightmenu"> 
      <div class="titlebox"><div class="text">MENU</div></div> 
      <div class="droite_text"> 
      DATA 
      </div> 
     </div> 

CSS改变

.leftMain{ 
    float:left; 
    } 
#rightmenu { 
    float:right; 
    } 

http://jsfiddle.net/2oqbh17L/1/

Answer 2

例如，你应该把你想要的所有东西放在一个容器#left上，然后添加float：留给它。一切你想有摆正在#right并添加浮动：权

而且你有一些错误代码（例如许多元素与#leftmenu ID - ID应该是潮头

这里是小提琴http://jsfiddle.net/rwspycft/1/

Answer 3

您需要浮动的那些元素。然而，如果你把它们飘浮他们将流出公文流转我想尝试用乱搞：。

clear: both; 

和/或

overflow: hidden; 

http://jsfiddle.net/afgmyw4t/

点击我已经重新创建你的问题的jsfiddle。我把元素向左和向右漂浮。然后补充明确：两者;在左侧的元素上，以保持它们在文档流中。他们可能需要一些样式调整，如果您有任何问题，请留下评论。

Answer 4

在这里你可以看到这个例子。 http://jsfiddle.net/fL5gg70o/

#leftmenu { 
float:left; 
} 

而对于右格：

#rightmenu { 
float:right; 
} 

Answer 5

你可以环绕单独的div菜单和设置两个浮动性。在HTML

.rightt { 
    float: right; 
    vertical-align: text-top; 
    margin: 0 auto; 
    width: 50%; 
} 

.leftt { 
    float: left; 
    width: 50%; 
} 

<div id="base"> 
    <section style="color: black;"> 
     <div class='leftt'> 
     <div id="leftmenu"> 
      <div class="titlebox"><div class="text"><?php echo NOM_SITE;?></div></div> 
      <ul> 
       <li><a href="#">DATA</a></li> 
       <li><a href="#">DATA</a></li> 
       <li><a href="#">DATA</a></li> 
      </ul> 
     </div> 


     <div id="leftmenu"> 
      <div class="titlebox"><div class="text">MENU</div></div> 
      <ul> 
       <li><a href="#">DATA</a></li> 
       <li><a href="#">DATA</a></li> 
      </ul> 
      </div> 

     <div id="leftmenu"> 
      <div class="titlebox"><div class="text">MENU</div></div> 
      <ul> 
       <li><a href="#">DATA</a></li> 
      </ul> 
      </div> 
</div> 

<div class='rightt'> 
     <div id="rightmenu"> 
      <div class="titlebox"><div class="text">MENU</div></div> 
      <div class="droite_text"> 
       <li><a href="forum.php?id=1">DATA</a></li> 
      </div> 
     </div> 
     <div id="rightmenu"> 
      <div class="titlebox"><div class="text">MENU</div></div> 
      <div class="droite_text"> 
      DATA 
      </div> 
     </div> 
     </div> 

FIDDLE