左浮动，右浮动- Wordpress

Question

在向左和向右浮动元素时遇到问题。你可以看到我想向左和向右浮动的here。你可以在标题中看到我想要的左边和右边的元素。

这使用了一个插件，但仍然可以像HTML一样设置样式。下面是一些相关的HTML：

<div id="menuHeader">
<h2>Appetizers Left</h2>
</div>
[tbl width="425" colwidth="50|50" colalign="left|right"]
Onion Rings,4.95
Fries,3.99
Nachos Supreme (small),8.95
Nachos Supreme (large),10.95
[/tbl]

<div id="menuHeader">
<h2>Fresh Salads Right</h2>
</div>
[tbl width="425" colwidth="100|50|50" colalign="left|right|right"]
,Small,Large
Garden Salad,4.95,5.99
Chef | Caesar| Greek,5.95,6.95
Add chicken for,,2.00
[/tbl]

Answer 1

您可以将每个标题和相关的表包装在一个div中，如下所示，并将浮点数应用于该容器。

HTML

<div class="menu-container left">
    <div id="menuHeader">
        <h2>Appetizers Left</h2>
    </div>
    [tbl width="425" colwidth="50|50" colalign="left|right"]
    Onion Rings,4.95
    Fries,3.99
    Nachos Supreme (small),8.95
    Nachos Supreme (large),10.95
    [/tbl]
</div>

<div class="menu-container right">
    <div id="menuHeader">
        <h2>Fresh Salads Right</h2>
    </div>
    [tbl width="425" colwidth="100|50|50" colalign="left|right|right"]
    ,Small,Large
    Garden Salad,4.95,5.99
    Chef | Caesar| Greek,5.95,6.95
    Add chicken for,,2.00
    [/tbl]
</div>

CSS

.menu-container.left { float: left; }
.menu-container.right { float: right; }

Answer 2

You need wrappers around your relevant sections

<div class="leftFloat">
<div id="menuHeader">
<h2>Appetizers Left</h2>
</div>
[tbl width="425" colwidth="50|50" colalign="left|right"]
Onion Rings,4.95
Fries,3.99
Nachos Supreme (small),8.95
Nachos Supreme (large),10.95
[/tbl]
</div>


<div class="rightFloat">
<div id="menuHeader">
<h2>Fresh Salads Right</h2>
</div>
[tbl width="425" colwidth="100|50|50" colalign="left|right|right"]
,Small,Large
Garden Salad,4.95,5.99
Chef | Caesar| Greek,5.95,6.95
Add chicken for,,2.00
[/tbl]
</div>

<div class="clear"></div>

css样式中的相关样式。

.leftFloat{ float:left; }
.rightFloat{ float:right; }

.clear{ clear:both; }

有关浮动元素的更多信息，请单击此处：http://html.net/tutorials/css/lesson13.php

Answer 3

您必须将所有内容放在一个div中，并根据需要使用style="float:right/left“。

<div style="float:left">
<div id="menuHeader">
<h2>Appetizers Left</h2>
</div>
[tbl width="425" colwidth="50|50" colalign="left|right"]
Onion Rings,4.95
Fries,3.99
Nachos Supreme (small),8.95
Nachos Supreme (large),10.95
[/tbl]
</div>

<div style="float:right">
<div id="menuHeader">
<h2>Fresh Salads Right</h2>
</div>
[tbl width="425" colwidth="100|50|50" colalign="left|right|right"]
,Small,Large
Garden Salad,4.95,5.99
Chef | Caesar| Greek,5.95,6.95
Add chicken for,,2.00
[/tbl]
</div>