div.clear {clear:both;}无效

时间:2015-09-20 08:39:00

标签: html css clear

this page上,我的客户端有以下HTML (我知道客户端在Wordpress中使用额外的文本编辑,因此<span style="foobar">):

<table id="regulartable" style="height: 339px;" width="1284">
<thead>
<tr>
<th class="regularstandard" scope="col"><span style="color: #000000; font-family: verdana, geneva, sans-serif;"> </span></th>
<th class="regularstandard" scope="col"><strong><span style="font-size: 14pt; color: #ff9900; font-family: verdana, geneva, sans-serif;">MON</span></strong></th>
<th class="regularstandard" scope="col"><strong><span style="font-size: 14pt; color: #ff9900; font-family: verdana, geneva, sans-serif;">TUE</span></strong></th>
<th class="regularstandard" scope="col"><strong><span style="font-size: 14pt; color: #ff9900; font-family: verdana, geneva, sans-serif;">WED</span></strong></th>
<th class="regularstandard" scope="col"><strong><span style="font-size: 14pt; color: #ff9900; font-family: verdana, geneva, sans-serif;">THUR</span></strong></th>
<th class="regularstandard" scope="col"><strong><span style="font-size: 14pt; color: #ff9900; font-family: verdana, geneva, sans-serif;">FRI</span></strong></th>
</tr>
</thead>
<tbody>
<tr>
<td class="regulartable-highlight-odd"><span style="font-family: verdana, geneva, sans-serif;"><strong><span style="color: #ff9900;">09.30am</span></strong></span></td>
<td class="regulartable-odd"><span style="color: #000000; font-family: verdana, geneva, sans-serif;">Cardio Punch<br />
<span style="font-size: 10pt;">Picnic Cove Park<br />
Edgewater</span><br />
</span></td>
<td class="regulartable-odd"><span style="color: #000000; font-family: verdana, geneva, sans-serif;">Fun and Games<br />
<span style="font-size: 10pt;">Eiffel Circuit<br />
Tapping<br />
</span></span></td>
<td class="regulartable-odd"><span style="color: #000000; font-family: verdana, geneva, sans-serif;">Cardio Punch<br />
<span style="font-size: 10pt;">Frederick Duffy Park<br />
Wanneroo</span></span></td>
<td class="regulartable-odd"><span style="color: #000000; font-family: verdana, geneva, sans-serif;">FBI &#8211; A<br />
<span style="font-size: 10pt;">Nankeen Circuit<br />
Tapping</span><br />
</span></td>
<td class="regulartable-odd"><span style="color: #000000; font-family: verdana, geneva, sans-serif;">Fun n Games<br />
<span style="font-size: 10pt;">Picnic Cove Park<br />
Edgewater</span><br />
</span></td>
</tr>
<tr>
<td class="regulartable-highlight-odd"><span style="font-family: verdana, geneva, sans-serif;"><strong><span style="color: #ff9900;">10.30am</span></strong></span></td>
<td class="regulartable-odd"><span style="color: #000000; font-family: verdana, geneva, sans-serif;">&#8211;</span></td>
<td class="regulartable-odd"><span style="color: #000000; font-family: verdana, geneva, sans-serif;">FBI &#8211; A<br />
<span style="font-size: 10pt;">Eiffel Circuit<br />
Tapping</span><br />
</span></td>
<td class="regulartable-odd"><span style="color: #000000; font-family: verdana, geneva, sans-serif;">FBI &#8211; A<br />
<span style="font-size: 10pt;">Frederick Duffy Park<br />
Wanneroo</span><br />
</span></td>
<td class="regulartable-odd"><span style="color: #000000; font-family: verdana, geneva, sans-serif;">&#8211;</span></td>
<td class="regulartable-odd"><span style="color: #000000; font-family: verdana, geneva, sans-serif;">&#8211;</span></td>
</tr>
<tr>
<td class="regulartable-highlight-odd"><span style="font-family: verdana, geneva, sans-serif;"><strong><span style="color: #ff9900;">02.00pm</span></strong></span></td>
<td class="regulartable-odd"><span style="color: #000000; font-family: verdana, geneva, sans-serif;">&#8211;</span></td>
<td class="regulartable-odd"><span style="color: #000000; font-family: verdana, geneva, sans-serif;">FBI &#8211; A<br />
<span style="font-size: 10pt;">Picnic Cove Park<br />
Edgewater</span><br />
</span></td>
<td class="regulartable-odd"><span style="color: #000000; font-family: verdana, geneva, sans-serif;">&#8211;</span></td>
<td class="regulartable-odd"><span style="color: #000000; font-family: verdana, geneva, sans-serif;">Cardio Punch<br />
<span style="font-size: 10pt;">Frederick Duffy Park<br />
Wanneroo</span><br />
</span></td>
<td class="regulartable-odd"><span style="color: #000000; font-family: verdana, geneva, sans-serif;">&#8211; </span></td>
</tr>
<tr>
<td class="regulartable-highlight-odd"><span style="font-family: verdana, geneva, sans-serif;"><strong><span style="color: #ff9900;">06.00pm</span></strong></span></td>
<td class="regulartable-odd"><span style="color: #000000; font-family: verdana, geneva, sans-serif;">&#8211;</span></td>
<td class="regulartable-odd"><span style="color: #000000; font-family: verdana, geneva, sans-serif;">&#8211;</span></td>
<td class="regulartable-odd"><span style="color: #000000; font-family: verdana, geneva, sans-serif;">Cardio Punch<br />
<span style="font-size: 10pt;">Picnic Cove Park<br />
Edgewater</span><br />
</span></td>
<td class="regulartable-odd"><span style="color: #000000; font-family: verdana, geneva, sans-serif;">Fun n Games<br />
<span style="font-size: 10pt;">Nankeen Circuit<br />
Tapping</span></span></td>
<td class="regulartable-odd"><span style="color: #000000; font-family: verdana, geneva, sans-serif;">&#8211;</span></td>
</tr>
</tbody>
</table>
</div>
<div class="clear"></div>
<div class="clearsmall" style="text-align: right;"><span style="color: #000000;"><span style="font-family: verdana, geneva, sans-serif;">Sessions usually run for 1 hour  </span>                                                                                                                                                                                                                                                                                                                                                 <strong><span style="text-decoration: underline;"><span style="color: #ff9900; text-decoration: underline;"> <a href="https://clients.mindbodyonline.com/classic/ws?studioid=262803&amp;stype=41&amp;sTG=22" onclick="__gaTracker('send', 'event', 'outbound-article', 'https://clients.mindbodyonline.com/classic/ws?studioid=262803&amp;stype=41&amp;sTG=22', 'Pricing and Booking');" class="calloutaction" style="color: #ff9900; text-decoration: underline;">Pricing and Booking</a> </span></span></strong></span></div>
<hr />
<h3 style="text-align: justify;"><strong><span style="font-family: verdana, geneva, sans-serif; color: #cc99ff;">Fun and Games</span></strong></h3>
<p style="text-align: justify;"><span style="color: #000000; font-family: verdana, geneva, sans-serif;">Working a sweat whilst having fun playing games! Challenge yourself, encourage your team mates, get your body pumping, and maybe&#8230;maybe meet your younger self again <img src="http://vivesco-mhf.com.au/wp-includes/images/smilies/simple-smile.png" alt=":-)" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span></p>
<hr />
<h3 style="text-align: justify;"><strong><span style="font-family: verdana, geneva, sans-serif; color: #cc99ff;">Full Body Integrated Awesomeness  (FBI &#8211; A)</span></strong></h3>
<p style="text-align: justify;"><span style="color: #000000; font-family: verdana, geneva, sans-serif;">A session all about you! Exercising for strength, for cardio, for mobility, for recovery = for a feeling of AWESOMENESS!</span><br />
<span style="color: #000000; font-family: verdana, geneva, sans-serif;"> Using ViPR, Sandbells, and Bodyweight, every single exercise is fully customizable to suit you!<br />
</span></p>
<hr />
<h3 style="text-align: justify;"><strong><span style="font-family: verdana, geneva, sans-serif; color: #cc99ff;">Cardio Punch</span></strong></h3>
<p style="text-align: justify;"><span style="color: #000000; font-family: verdana, geneva, sans-serif;">A session involving a lot of punching, some kicking, and getting your heart pumping.</span><br />
<span style="color: #000000; font-family: verdana, geneva, sans-serif;"> Gloves and Mitts provided, but feel free to bring your own if you prefer.</span></p>
<hr />
<h3><strong><span style="font-family: verdana, geneva, sans-serif; color: #cc99ff;">Sand Running   <span style="color: #ff0000;">Currently not scheduled</span></span></strong></h3>
<p><span style="color: #000000; font-family: verdana, geneva, sans-serif;">Self explanatory: We will go for run training on the beach. This is for beginners which means the training is interval based and can be customized where needed</span></p>
<hr />
<h3 style="text-align: justify;"><span style="color: #000000; font-family: verdana, geneva, sans-serif;">These sessions are limited to 10 participants, so bookings are essential.</span></h3>
<hr />

当视口宽度为525像素或更小时,table#regulartable(“组计划”)会根据this project更改为响应表。

但是,<div class="clear"></div>末尾的table#regulartable似乎不起作用,因为table#regulartable下方的文字显示在table#regulartable下方:

enter image description here

这取自Mozilla Firefox响应式视图。

如何从“{会话通常持续1小时......”开始显示文字,以便在table#regulartable之后显示,而不是通过它达到峰值?感谢。

1 个答案:

答案 0 :(得分:3)

你的问题不是清除,而是高度定义可调节(339像素)。删除它使响应式视图看起来很好。