DIV并排，位置不正确

DIV side by side, incorrect positions

本文关键字：不正确 位置 并排 DIV      更新时间：2023-09-26

我尝试了很多不同的方法，试图让两个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，谢谢你让我知道！

您正在提供CSS，但您也在代码中使用Bootstrap（或类似的代码），我想知道您是否考虑过其影响。

--> row
 ---->col-md-2

也就是说，使用带有md断点的12列系统的两列网格，其中是右侧的另一个col-md-10。

在我看来，你似乎在与bootstrap进行一场失败的战斗。如果没有完整的代码，这里唯一的解决方案就是重写所有的代码，而这实际上对你没有任何帮助。

我给你这个：

<div class="row">
<div class="col-md-2">Left</div>
<div class="col-md-10">Right</div>
</div>

12列系统，但您需要了解当您移动并变得小于md断点时会发生什么。

可能与一样简单

<div class="row">
<div class="col-md-2 col-xs-12">Left</div>
<div class="col-md-10 col-xs-12">Right</div>
</div>

怎么样？https://jsfiddle.net/wx3emp71/2/

我重新组织了您的行div，以包含您想要并排的两列。然后我给他们一类"内容"（可以随意更改），并让他们每个都有50%宽度的内联块。我还去掉了你的一个集装箱上的一些空白。为了使它们以50%的宽度并排显示，我必须稍微重组div，以便在关闭标记的末尾和新的打开标记的开头之间没有空白。最后，我给了它们box-sizing: border-box，这样在计算宽度时就不会有任何边距/填充，因此允许50%的宽度起作用。

如果你喜欢我的解决方案，我实际上建议你在所有CSS文件中添加以下样式*{ box-sizing: border-box;}。这样，所有东西都具有border-box属性，您永远不必担心将填充物放入计算中。

我把我的作品放在/*****我的编辑*****/评论下，这样你就可以随心所欲地修改它。我不认为我在其他地方添加了任何其他造型，但我确实删除了一些，正如我之前提到的。

相关文章：