我已经尝试了很多不同的方法试图让2个div并排，但不管我做什么我似乎无法弄明白。
我设法用“position：absolute”对它进行了一段时间的排序，但直到我意识到菜单高度没有变化。在CSS方面我不是专家，但其余的我很擅长。我搜索并搜索到目前为止，这是我提出的最佳结果：
结果如下：http://puu.sh/oWRbK/4827eeba57.jpg但应该是这样的：http://puu.sh/oWS52/a2dc6282e4.jpg任何有任何建议如何解决这个问题的人，请随时帮助我，因为我现在变得白发苍苍，一直试图找出过去4个小时的方法，但无论我做什么，如果我在像素空间上边缘我得到它是正确的但是与我的显示器相比，它的分辨率完全相同。
.wrapper {
padding-left: 68px;
padding-right: 68px;
width: auto;
height: auto;
margin: 0;
}
.header {
padding-top: 16px;
padding-bottom: 14px;
}
.hline {
width:auto;
height:2px;
background: #FFFFFF;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-left: 325px;
}
/* USER MENU */
.menuWrap {
padding-right: 65px;
width: 260px;
}
.user_menu {
border-style: solid;
border-color: rgba(255, 255, 255, 0.5);
border-width: 1px;
margin-top: 41px;
min-height: 390px;
width: 260px;
color: #a6bed5;
background: rgba(110, 110, 110, 0.5); /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left top, rgba(110, 110, 110, 0.5), rgba(235, 235, 235, 0.5)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, rgba(110, 110, 110, 0.5), rgba(235, 235, 235, 0.5)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, rgba(110, 110, 110, 0.5), rgba(235, 235, 235, 0.5)); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, rgba(110, 110, 110, 0.5), rgba(235, 235, 235, 0.5)); /* Standard syntax */
}
.user_after {
border-style: solid;
border-color: #FFFFFF;
border-width: 1px;
margin-top: 17px;
height: 39px;
width: 260px;
background: #6e6e6e; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left top, #6e6e6e, #ebebeb); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, #6e6e6e, #ebebeb); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, #6e6e6e, #ebebeb); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, #6e6e6e, #ebebeb); /* Standard syntax */
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}
.user_menu .content {
width: 260px;
}
.user_menu .header {
padding: 6px;
border-bottom: 1px rgba(255, 255, 255, 0.5) solid;
min-height: 62px;
}
.user_menu .header img {
width: 62px;
height: 62px;
float: left;
}
.user_menu .header p {
padding-left: 70px;
font-family: Open Sans;
font-size: 17px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
}
.user_menu .header a {
text-decoration: none;
font-size: 16px;
color: #94a9b9;
}
.user_menu .header a:link a:visited a:active {
text-decoration: none;
font-size: 16px;
color: #94a9b9;
}
.user_menu .header a:hover {
text-decoration: none;
color: #b5cee6;
}
.user_menu .addMenu {
font-family: Open Sans;
font-size: 20px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 20px;
}
.user_menu .addMenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.user_menu .addMenu li a {
display: block;
color: #94a9b9;
padding: 12px 0 12px 20px;
text-decoration: none;
border-bottom: 1px rgba(255, 255, 255, 0.5) solid;
}
/* Change the link color on hover */
.user_menu .addMenu li a:hover {
color: #b5cee6;
}
/* MAIN CONTAINER */
.bs-container {
border-style: solid;
border-color: #FFFFFF;
border-width: 1px;
margin-top: 41px;
min-height: 390px;
width: 100%;
background: #FFFFFF;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
<div class="wrapper">
<div class="header">
<img src="/images/logo.png" />
</div>
<div class="hline"></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="bs-container">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"><!--ISSUE IS RIGHT HERE.-->
<div class="user_menu">
<div class="content">
<div class="header">
<img src="http://mta.everest-community.net/mta-image.php?id=1" />
<p>
<b><font color="#f7b618">123B3n</font> <font color="#334c66">(1)</font></b><br>
<a href="#">LOGOUT</a>
</p>
</div>
<div class="addMenu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#" data-toggle="collapse" data-target="#characters">CHARACTERS <i class="fa fa-angle-down" aria-hidden="false"></i></a></li>
<div id="characters" class="collapse">
<li><a href="#" style="padding-left: 40px;">OVERVIEW</a></li>
<li><a href="#" style="padding-left: 40px;">STAT TRANSFER</a></li>
<li><a href="#" style="padding-left: 40px;">CUSTOM INTERIORS</a></li>
<li><a href="#" style="padding-left: 40px;">MANAGEMENT</a></li>
</div>
<li><a href="#" data-toggle="collapse" data-target="#account">ACCOUNT <i class="fa fa-angle-down" aria-hidden="false"></i></a></li>
<div id="account" class="collapse">
<li><a href="#" style="padding-left: 40px;">PROFILE</a></li>
<li><a href="#" style="padding-left: 40px;">HISTORY</a></li>
<li><a href="#" style="padding-left: 40px;">SETTINGS</a></li>
<li><a href="#" style="padding-left: 40px;">OVERVIEW</a></li>
</div>
<li><a href="#" data-toggle="collapse" data-target="#premium">PREMIUM <i class="fa fa-angle-down" aria-hidden="false"></i></a></li>
<div id="premium" class="collapse">
<li><a href="#" style="padding-left: 40px;">PREMIUM FEATURES</a></li>
<li><a href="#" style="padding-left: 40px;">DONATION HISTORY</a></li>
<li><a href="#" style="padding-left: 40px;">DONATE NOW!</a></li>
</div>
</ul>
</div>
</div>
</div>
<div class="user_after"></div><!--JUST FOR SHOW-->
</div>
</div>
</div>
我的JSFiddle：https://jsfiddle.net/123B3n/ohku4a0q/
P.S直到现在才知道JSFiddle，谢谢你让我知道！
答案 0 :(得分：2)
您正在提供CSS，但您也在代码中使用Bootstrap（或看起来像它），我想知道您是否考虑过这种影响。
--> row
---->col-md-2
这是使用带有md断点的12列系统的两列网格，其中右侧是另一列col-md-10。
对我来说，看起来你正在与引导队进行一场失败的战斗。如果没有完整的代码，这里唯一的解决方案就是重写所有代码，而且你没有服务。
我会给你这个：
<div class="row">
<div class="col-md-2">Left</div>
<div class="col-md-10">Right</div>
</div>
12列系统，但是你需要研究当你移动并且小于md断点时会发生什么。
MAY 就像
一样简单<div class="row">
<div class="col-md-2 col-xs-12">Left</div>
<div class="col-md-10 col-xs-12">Right</div>
</div>
答案 1 :(得分：0)
这是怎么回事？ https://jsfiddle.net/wx3emp71/2/
我重新组织了你的行div，以包含你想要彼此相邻的两列。然后我给了他们一个＆＃34;内容＆＃34; （随意改变这一点）并使它们成为每个50％宽度的内联块。我还删除了你的一个容器上的一些保证金。为了使它们以50％的宽度彼此并排显示，我必须稍微重构你的div，以便在关闭标签的末尾和新的开放标签的开头之间没有空白区域。最后，我给了他们box-sizing: border-box，以便在计算宽度时任何边距/填充都不起作用，因此允许50％的宽度工作。
如果您喜欢我的解决方案，我实际上建议您为所有CSS文件添加以下样式*{ box-sizing: border-box;}。这样，一切都有边框属性，你永远不必担心在你的计算中拟合填充。
我将我的作品放在/ *****我的编辑***** /评论下，这样你就可以根据自己的需要改变它。我不认为我在其他地方添加了任何其他样式，但我确实删除了一些我之前提到的。