1

我无法定位.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;

}

感谢您的解决方案...

4

5 回答 5

1

你的prod_cont和.menubox需要的float:left。

添加以下内容：

#prod_cont, .menubox {
    float: left;
}

演示

于 2013-05-29T11:09:20.430 回答
1

应用float: leftto#prod_cont和后.menubox，不要忘记清除浮动。

您可以在课后使用css，例如clear: bothdiv 。.menubox

于 2013-05-29T11:22:55.290 回答
0

尝试添加这个：

#parent_container>div {display:inline-block;vertical-align:top}
于 2013-05-29T11:08:36.110 回答
0

删除宽度#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;
}
于 2013-05-29T11:19:07.030 回答
0 
 $("" + relatedDivID).fadeToggle("slow", "linear",function(){

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

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

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

这是一个快速的jsFiddle

于 2013-05-29T11:19:38.927 回答