Question

我想知道如何将这些div放到White 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

HTML中的位更改

<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：left。你想要的所有东西都放在#right并添加浮动：正确

此外，您在代码中也有一些错误（例如，许多带有#leftmenu id的元素 - id应该是uniqe

这里是小提琴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;
}

对于正确的div：

#rightmenu {
 float:right;
 }

Answer 5

您可以将菜单包装在单独的div周围，并为两者设置浮动属性。

.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

将元素放在div的右侧

5 个答案: