html - 我不知道为什么我的 div 元素不遵循正常的文档流

Question

当一个 div 向左浮动而另一个 div 向右浮动时，我遇到了文档流问题。

左右两个 div 彼此完全水平对齐。 (菜单项名称和菜单项价格)

但是下面的菜单类别名称(汉堡)和菜单类别描述是从最上面开始的。在第一个菜单类别(早餐)的正下方

我已将 Menu Item Name Div 设置为向左浮动和向左清除。我对菜单项价格做了同样的事情，但我向右浮动并向右移动。

“汉堡”类别及其描述需要在最后一个菜单项名称和价格下方显示。 “燕麦片 3.50”

清除 broth div 时，汉堡类别不需要遵循正常的文档流吗？

我尝试将 .menu_item_name CSS 更改为显示为 inline_block ，这解决了问题，但菜单价格与菜单项不一致。

你们能帮我解决这个问题吗？我将不胜感激。

下面是一个 js fiddle 示例的链接。

http://jsfiddle.net/eldan88/NkH74/

<style>
    #menu_container {
    width: 750px;
    margin-left: auto;
    margin-right: auto;

    }

    #menu_left_wrapper {
    width: 350px;
    float: left;
    clear: left;
    padding-right: 25px;
    border-right:thick solid #ff0000;
    }

    #menu_right_wrapper {
    width: 350px;
    float: right;
    clear: right;

    }

    .menu_item_name a {
       float: left;
        clear: left;
    }

    .menu_item_price {
    float: right;
    clear: right;
    }

</style>

HTML:

<div id='menu_left_wrapper'>
    <div class='menu_category'>Breakfast</div>
    <div class='menu_item_name'>
        <a href='/menus/item-detail.php' >  H&H Bagel  </a>
    </div>
    <div class='menu_item_price'>
        1.00<img class='item_image' src='21404.jpg' width='15px' height='15' />
    </div> 
    <div class='menu_item_name'>
        <a href='/menus/item-detail.php' >  One Egg Sandwich  </a>
    </div>
    <div class='menu_item_price'>1.75</div> 
    <div class='menu_item_name'>
        <a href='/menus/item-detail.php' >  Breakfast Platter  </a>
    </div>
    <div class='menu_item_price'>4.25</div> 
    <div class='menu_item_name'>
        <a href='/menus/item-detail.php' >  Create your own egg sandwich  </a>
    </div>
    <div class='menu_item_price'>3.25</div> 
    <div class='menu_item_name'>
        <a href='/menus/item-detail.php' >  Two Pancakes and Two Eggs  </a>
    </div>
    <div class='menu_item_price'>4.75</div> 
    <div class='menu_item_name'>
        <a href='/menus/item-detail.php' >  Oatmeal </a>
    </div>
    <div class='menu_item_price'>3.50</div> 
    <div class='menu_category'>Burgers</div>

    Our certified Angus beef burgers are grilled to order and served on a toasted brioche bun with lettuce and tomato, pickles and red onion upon request

    <div class='menu_category'>Mexican Quesadillas</div>
    <div class='menu_category'>Salad    </div>
    <div class='menu_category'>Cold Beverages</div>
</div>

Answer 1

这就是您所需要的:http://jsfiddle.net/NkH74/2/

<div class='menu_item_name'>
    <a href='/menus/item-detail.php'>  H&amp;H Bagel  </a>
    <span class="menu_item_price">1.00</span>
</div>

#menu_left_wrapper {
     width: 350px;
     padding-right: 25px;
     border-right:thick solid #ff0000;
 }
 .menu_item_name span{
     float:right;
 }

真的。

我所做的是，我对链接 和价格 使用了一个共同的父级。