我在定位.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;
}
谢谢你的解决方案...
答案 0 :(得分:1)
答案 1 :(得分:1)
将float: left
应用于#prod_cont
和.menubox
后,请不要忘记清除浮动广告。
您可以在clear: both
课程之后将.menubox
等css用于div。
答案 2 :(得分:0)
尝试添加此内容:
#parent_container>div {display:inline-block;vertical-align:top}
答案 3 :(得分: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;
}
答案 4 :(得分:0)
$("" + relatedDivID).fadeToggle("slow", "linear",function(){
}).css({display:'inline-block'});
将以下内容添加到您当前的
中.prod_cont{display:inline-block;}
.menubox{vertical-align:top}
这是一个快速jsFiddle