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>

浮左，浮右 - Wordpress

3 个答案: