0

小提琴

标题出现在它上面的内容之上。

将 Twitter 添加.clearfix到容器中似乎并不能解决问题。我不知道如何将我的标题栏向下推到它上面的内容之下。

建议？

.clearfix参考（来自 Twitter Bootstrap）——写在less：

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

并使用如下：

.title-tabs {
  .clearfix;           /* HERE */
  border-bottom: 1px solid #91b6eb;
  position: relative;
  h3 {
    float: left;
    margin: 0;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  /* etc... */
4

2 回答 2

1

这可能是您正在寻找的

http://jsfiddle.net/rUQ2z/2/

    <div class="main-content">
  <div class="container">
    <div class="access-details">
      <div class="pull-left">
        <div>Logged in: <b>John Doe</b>
        </div>
        <div>Access Lvl: Noob</div>
      </div>
      <div class="pull-right">
        <div>Sunday, January 13th, 2013</div>
      </div>
    </div>
    <div class="title-tabs clearfix">
      <h3>Client Details</h3>
      <ul class="nav">
        <li class="active"><a href="#">Details</a>
        </li>
        <li><a href="#">Program</a>
        </li>
        <li><a href="#">Special</a>
        </li>
        <li><a href="#">Docs</a>
        </li>
        <li><a href="#">Notes</a>
        </li>
      </ul>
    </div>
    <p>Welcome to Client Details</p>
  </div>
</div>

h3 {
  font-size: 36px;
}
.clearfix {
  *zoom: 1;
  &:before, &:after {
    display: table;
    content:"";
    // Fixes Opera/contenteditable bug: // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 line-height: 0;
  }
  &:after {
    clear: both;
  }
}
.title-tabs {
  .clearfix;
  border-bottom: 1px solid #91b6eb;
  position: relative;
  h3 {
    float: left;
    margin: 0;
    display: block;
    left: 0;
    bottom: 0;
  }
  ul {
    float: right;
    margin: 0;
    display: block;
    right: 0;
    bottom: 0;
    li {
      float: left;
      a {
        display: block;
        padding: 3px 5px;
        background-color: #f9fafe;
        .border-radius(5px, 0, 0, 5px);
        border-color: #91b6eb;
        border-width: 2px 2px 0 2px;
        border-style: solid;
        text-transform: uppercase;
        font-weight: bold;
      }
    }
    li + li {
      margin-left: -2px;
    }
  }
}

不需要 position: absolute 在使用 float 的同一类上。您要么使用浮点数，要么使用相对/绝对位置。

您想将 clearfix 应用于包含浮动的容器，这将更新容器的高度，从而使 clearfix 下面的内容不会与上面的内容重叠。

编辑

如果您正在寻找处理动态内容的替代答案，您希望菜单项向右浮动并对齐底部，那么表格是一种方法。

看看下面的代码。我将容器设为表格，将标题选项卡设为标题行，并添加了 ul-container，以便可以将菜单项包含在表格单元格中。

http://jsfiddle.net/rUQ2z/11/

<div class="main-content">
  <div class="container">
    <div class="access-details">
      <div class="pull-left">
        <div>Logged in: <b>John Doe</b>
        </div>
        <div>Access Lvl: Noob</div>
      </div>
      <div class="pull-right">
        <div>Sunday, January 13th, 2013</div>
      </div>
    </div>
    <div class="title-tabs">
      <h3>Client Details</h3>
      <div class="ul-container">
      <ul class="nav">
        <li class="active"><a href="#">Details</a>
        </li>
        <li><a href="#">Program</a>
        </li>
        <li><a href="#">Special</a>
        </li>
        <li><a href="#">Docs</a>
        </li>
        <li><a href="#">Notes</a>
        </li>
      </ul>
      </div>
    </div>
    <p>Welcome to Client Details</p>
  </div>
</div>

h3 {
  font-size: 36px;
}
.clearfix {
  *zoom: 1;
  &:before, &:after {
    display: table;
    content:"";
    // Fixes Opera/contenteditable bug: // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 line-height: 0;
  }
  &:after {
    clear: both;
  }
}
.container {
  display: table;
  width: 100%;
}

.title-tabs {
  .clearfix;
  display: table-row;
  border-bottom: 1px solid #91b6eb;
  position: relative;
  h3 {
    margin: 0;
    vertical-align: bottom;
    display: table-cell;
    left: 0;
    bottom: 0;
  }
  .ul-container {
     display: table-cell;
    text-align: right;
    vertical-align: bottom;
  }

  ul {
    margin: 0;
    display: inline-block;
    right: 0;
    bottom: 0;
    li {
      float: left;
      a {
        display: block;
        padding: 3px 5px;
        background-color: #f9fafe;
        .border-radius(5px, 0, 0, 5px);
        border-color: #91b6eb;
        border-width: 2px 2px 0 2px;
        border-style: solid;
        text-transform: uppercase;
        font-weight: bold;
      }
    }
    li + li {
      margin-left: -2px;
    }
  }
}
于 2013-01-14T02:17:30.977 回答
1

发生的事情是您的 .title-tabs 设置为相对，而 h3 设置为绝对和底部，因为您的 .title-tabs 没有高度，所以 h3 元素将占据最后一个底部并超出 .标题标签行。从 h3 css 中删除底部。

于 2013-01-14T04:27:03.607 回答