gpt4 book ai didi

html - 将元素放在 div 的右侧

转载 作者:行者123 更新时间:2023-11-28 17:23:43 38 4
gpt4 key购买 nike

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

如您所见,它堆叠在左侧 div 下方,我希望它位于右上方。当我使用 float:right 时,这是我得到的: 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>

谢谢。 :)

最佳答案

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/

关于html - 将元素放在 div 的右侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27600267/

38 4 0