Question

我在定位.menubox div（红色）时遇到了问题......因为我希望它能够很好地放在左侧.menu div旁边。相反，它固执地拒绝从.menu以下移动。简而言之，我想把这些并排放置，所以我有错，我知道，只要推动正确的方向，我们将非常感激。

请参阅我js fiddle

的链接

HTML：

<div id="parent_container">
    <div id='prod_cont'>
        <div id="menu">
            <ul>
                <li><a class="menuitem" href="#smPlates">Product Preview 1</a>
                </li>
                <li><a class="menuitem" href="#salads">Product Preview 2</a>
                </li>
                <li><a class="menuitem" href="#burgers">Product Preview 3</a>
                </li>
                <li><a class="menuitem" href="#desserts">Product Preview 4</a>
                </li>
            </ul>
        </div>
    </div>        
    <!-- P1 -->
    <div class="menubox" id="smPlates">
        <p>Product Detail 1</p>
    </div>
    <!-- P2 -->
    <div class="menubox" id="salads">
        <p>Product Detail 2</p>
    </div>
    <!-- P3 -->
    <div class="menubox" id="burgers">
        <p>Product Detail 3</p>
    </div>
    <!-- P4 -->
    <div class="menubox" id="desserts">
        <p>Product Detail 4</p>
    </div>
</div>

CSS:

#parent_container {
    height:700px;
    display:block;
    background-color:#66CCCC;
    border:1px solid #000;
    padding:20px;
}

#prod_cont {
    width:255px;
    height:410px;
    background-color:#fff; 
    padding:10px;
}
.menuitem {
    height:100px;
    width:250px;
    display:block;
    background-color:#FFFFE0;
    border:1px solid #000;
    margin-right:5px;

}


.menubox {
    width:30%;
    height:260px;
    -webkit-border-bottom-right-radius: 25px;
    -moz-border-radius-bottomright: 25px;
    border-bottom-right-radius: 25px;
    -webkit-border-top-left-radius: 25px;
    -moz-border-radius-topleft: 25px;
    border-top-left-radius: 25px;
    text-align:right;
    color:#ffffff;
    background-color:#FF0000;
    border:1px solid #000;
    margin-top:0px;
    margin-right:10px;
    padding:10px;

}

谢谢你的解决方案...

Answer 1

您的prod_cont和.menubox都需要float:left。

添加以下内容：

#prod_cont, .menubox {
    float: left;
}

Demo

Answer 2

将float: left应用于#prod_cont和.menubox后，请不要忘记清除浮动广告。

您可以在clear: both课程之后将.menubox等css用于div。

Answer 3

尝试添加此内容：

#parent_container>div {display:inline-block;vertical-align:top}

Answer 4

从#prod_cont

移除宽度

并将float:left添加到.menubox

最终的样式将是

#prod_cont {
    height:410px;
    background-color:#fff; 
    padding:10px;
}
.menuitem {
    height:100px;
    width:250px;
    display:block;
    background-color:#FFFFE0;
    border:1px solid #000;
    margin-right:5px;
    float:left;
}

Answer 5

 $("" + relatedDivID).fadeToggle("slow", "linear",function(){

 }).css({display:'inline-block'});

将以下内容添加到您当前的

中

.prod_cont{display:inline-block;}
.menubox{vertical-align:top}

这是一个快速jsFiddle

DIV定位在左侧

5 个答案: