Question

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

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

但是，以下菜单类别名称（汉堡）和菜单类别说明始终位于顶部。在第一个菜单类别（早餐）正下方

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

＆＃34;汉堡＆＃34;类别及其描述需要在最后一个菜单项名称和价格下面显示。＆＃34;燕麦粥3.50＆＃34;

清除肉汤div时，汉堡类别是否需要遵循正常的文件流程？

我尝试更改.menu_item_name css以显示为inline_block，这解决了问题，但菜单价格不会与菜单项对齐。

你们可以帮我解决这个问题吗？我非常感激。

以下是js小提琴示例的链接。

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;
 }

确实

我所做的是为链接和价格使用了共同的父级。

Answer 2

尝试在菜单类别名称上方插入清除div：

<div class="clr"></div>

.clr { width: 100%; height: 0; clear: both; }

Answer 3

只需在Burgers类别

之前插入一个带有clear的新div

<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 style="clear: both;"></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 4

我更新了你的小提琴，我认为一切都按预期排列。它不优雅，但它的工作原理。

http://jsfiddle.net/mlnmln/WG5TK/2/

CSS：

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

.menu_item_price {
  text-align: right;
}

清除肉汤div时，汉堡类别是否需要遵循正常的文件流程？

汉堡类别本身并不遵循正常的文档流程，因为您需要在元素之后清除，而不是在其中清除正常流程。

奖励积分：正如其他人所说，将.menu_item_name和.menu_item_price包装在父元素中并应用clearfix可能会更好。（What methods of ‘clearfix’ can I use?）。

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

4 个答案: