Question

标题显示在其上方的内容之外。

将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... */

Answer 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;
    }
  }
}

在使用float的同一个类上不需要position：absolute。您可以使用浮点数，也可以使用位置相对/绝对值。

您希望将clearfix应用于包含浮动内容的容器，该容器将更新容器的高度，从而允许clearfix下方的内容与上述内容不重叠。

修改

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

看看以下代码。我将容器作为表格，title-tabs为标题行，我添加了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; } } }

Answer 2

发生的事情是你的.title-tabs设置为相对，h3设置为绝对和底部，因为.title-tabs没有高度，所以h3元素将占据最后一个底部并且熄灭.title-tabs行。从h3 css中移除底部。

如何clearfix绝对定位元素？

2 个答案: