0

我在左右浮动元素时遇到问题。你可以在这里看到我想要左右浮动的东西。您可以在标题中看到我想要左右的元素。

这是使用插件，但仍然可以像 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]
4

3 回答 3

0

您可以像这样将每个标题和关联的表包装在一个 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; }
于 2013-09-17T18:24:52.230 回答
0 
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

于 2013-09-17T18:24:55.573 回答
0

您必须将所有内容放在 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>
于 2013-09-17T18:26:31.877 回答