Question

我为我的网站使用响应式Skeleton框架（样板文件）（您可以从这里获取它：http://www.getskeleton.com/）。

我有<ul>列表列，其高度不同。为了清除嵌套列，CSS说我需要将.clearfix类放到父元素上。

我已经尝试过放类但不会清除嵌套列。由于我使用的是<ul>个列表项，因此无法放入<ul>元素内部。

有没有解决方案？

我的HTML代码：

    <ul class="container">
      <li class="one third columns alpha">a</li>
      <li class="one third columns">b</li>
      <li class="one third columns omega">c</li>
      <li class="two thirds columns alpha">d</li>
      <li class="one third columns omega">e</li>
    </ul>

在Skeleton CSS中，第一列的高度为500px，然后是（d）和（e）列，它应该移动到底部/第二行，或者换句话说，我需要清除嵌套列。

我想在我移动到另一行的时候再放一个空的<li class="clear"></li>但是它有效，但我正在寻找替代解决方案。比添加空<li>

更合适的东西

谢谢。

Answer 1

尝试将style='clear:both;'添加到代码而不是class='clearfix'

很多时候，这就是所谓的“clearfix”类只是根据我的经验（一种常见的CSS实践）。出于某种原因，你的代码可能没有在样式表中找到类，所以这只是一个快速猜测/修复。

Answer 2

如果您真的想要使用这些元素走这条路线，我认为您可以使用嵌套的<ul>执行此操作。

以下是Skeleton的表现：

<ul>

  <li class="six columns alpha clearfix">
    <ul class="container">
      <li class="one third columns">a</li>
      <li class="one third columns">b</li>
    </ul><!--.container-->
  </li><!--.clearfix-->

  <li class="six columns omega clearfix">
    <ul class="container">
      <li class="one third columns">c</li>
      <li class="one third columns">d</li>
      <li class="one third columns">e</li>
    </ul><!--.container-->
  </li><!--.clearfix-->

</ul>

如果我理解并妥善处理您的问题，请告诉我。根据Skeleton缺少的文档说：你需要将.alpha类添加到第一个嵌套行，将.omega类添加到第二个嵌套行并重复。

您可以看到父元素<li class="six columns alpha clearfix">元素已设置.clearfix，现在我们使用嵌套列表将A列和B列放在一行中，将列C，D和E放在第二行中行。

Clearfix无法处理响应式骨架

2 个答案: