1

(赤)の配置に問題があり.menubox divます...左側の横にうまく配置したいので.menu div。代わりに、下からの移動を頑固に拒否します.menu。要するに、私はこれらを並べて配置したいので、私が間違っていることを知っています。正しい方向に押すだけで大歓迎です。

私のjsフィドルへのリンクを参照してください

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: left、フロートをクリアすることを忘れないでください。#prod_cont.menubox

クラスclear: bothの後に divなどに css を使用できます。.menubox

于 2013-05-29T11:22:55.290 に答える
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 に答える
0

これを追加してみてください：

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