如何使这个 div 不通过右侧的另一个？答案

【问题标题】：How to make this div not past through the other one on the right side?如何使这个 div 不通过右侧的另一个？
【发布时间】：2017-02-04 17:12:11
【问题描述】：

我有这个问题，我似乎无法弄清楚如何使这个红色的 DIV 不通过右侧的 div，我想让它停留在右侧和左侧的 div 菜单之间。

Website Screenshot

HTML 代码：

<body>
<div class="navigationBar_default">
<div class="facetubeLogo_default"></div>

<div class="facetubeText_container_default"><center><strong class="facetubeText_default"></strong></center></div>
</div>
<div class="content_default">

<div class="leftMenu_onProfile">
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/myProfileButton_onLeftMenu_onProfile.png" /><br>MY PROFILE</button>
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/optionsButton_onLeftMenu_onProfile.png" /><br>GENERAL</button>
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/generalButton_onLeftMenu_onProfile.png" /><br>OPTIONS</button>
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/supportUsButton_onLeftMenu_onProfile.png" /><br>SUPPORT US</button>
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/logOutButton_onLeftMenu_onProfile.png" /><br>LOG OUT</button>
</div>

<!-- there must be some stuff here, otherwise leftMenu_onProfile will glitch out. -->

<div class="contentCenter_onProfile">
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaaaaaaaaaaaaaaAAAAAAAAAAAAAAAAAA
</div>

<!-- there must be some stuff here, otherwise leftMenu_onProfile will glitch out. -->

<div class="rightMenu_onProfile">user1<br>user2<br>user3<br>user4<br>user5</div>
</div>

CSS 代码：

.navigationBar_default {
    background-color:#202020;
    width:100%;
    height:32px;
    margin-left:-8px;
    margin-right:-8px;
    border:0;
    top:0;
    position:fixed;
}

.facetubeLogo_default {
    background-image:url("../images/facetube_icon_30x30_png.png");
    width:30px;
    height:30px;
    margin-top:1px;
    margin-left:1px;
    float:left;
}

.facetubeText_container_default {
    margin-top:6px;
}

.content_default {
    width:100%;
    height:100%;
    margin-top:32px;
    margin-left:-8px;
    margin-right:-8px;
    margin-bottom:-8px;
}

.leftMenu_onProfile {
    background-color:#0d0d0d;
    margin-top:0px;
    margin-left:-8px;
    width:240px;
    float:left;
}

.leftMenu_buttonOnProfile {
    background-color:#0d0d0d;
    border:0;
    border-bottom:1px solid #ffffff;
    width:240px;
    height:48px;
    color:#ffffff;
}

.leftMenu_buttonImage {
    float:left;
    margin-top:-2px;
    margin-right:-6px;
}

.contentCenter_onProfile {
  background-color:red;
  padding:2px; /* padding is originally removed */
  margin:0px;
  top:0px;
}

.rightMenu_onProfile {
    background-color:#0d0d0d;
    margin-top:-20px;
    margin-right:-16px;
    width:300px;
    color:#ffffff;
    float:right;
}

我觉得它必须与 content_default 和 width:100% 相关，但我不知道。我尝试了所有方法，但我无法弄清楚。

【问题讨论】：

您是否尝试过将 .contentCenter_onProfile 设为 span 标签而不是 div 标签？

标签： html css

【解决方案1】：

试试这个：

.contentCenter_onProfile {
 background-color:red;
 padding:2px; /* padding is originally removed */
 margin:0 300px;
 top:0px;
 width: 50%; /* SET THIS */
 white-space: pre-wrap;
 word-break: break-all;
 }

通过设置宽度，可以保证div不与右侧div重叠。

设置 float:left 或 float:right 会导致元素重叠。

【讨论】：

这就是我一直在寻找的东西。非常感谢兄弟：D