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

位置の必要はありません：floatを使用する同じクラスのabsolute。フロートを使用するか、相対/絶対位置を使用します。

フロートを含むコンテナにclearfixを適用すると、コンテナの高さが更新され、clearfixの下のコンテンツが上のコンテンツと重ならないようになります。

編集

メニュー項目を右に浮かせて下に揃えたい動的コンテンツを扱う別の答えを探している場合は、テーブルがこれを行う方法です。

次のコードを見てください。コンテナをテーブル、title-tabsをtitle-rowにし、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 要素が最後の下部を取り、.タイトルタブ行。h3 css から下部を削除します。

于 2013-01-14T04:27:03.607 に答える