Question

我创建了一个代表简单标签系统的最小示例，左侧是标签，右侧是内容。

在我的示例中，选项卡的底部位置会影响右侧内容的位置。只有当我clear定位在内容块中时才会发生这种情况。

这是最小示例的HTML，包括内容块中的不言自明的描述。那么出现的问题是clearfix下方的行错误定位。实际上，它位于左侧标签的底部。

* {
  box-sizing: border-box;
}

.clearfix {
  clear: both;
}

.nav-tabs {
  float: left;
  display: block;
  list-style: none;
  padding-left: 0;
  margin: 0 auto 0 0;
  width: 20%;
}

.nav-tabs > li {
  position: relative;
  display: block;
  float: none;
}

.nav-tabs > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
  border: 1px solid transparent;
}

.nav-tabs > li.active > a {
  border-color: blue transparent blue blue;
}

.tab-content > .tab-pane {
  display: none;
}

.tab-content > .tab-pane.active {
  display: block;
}

.tab-body {
  position: relative;
  border: 1px solid red;
  padding: 20px;
  width: 80%;
  margin-left: 20%;
}

<ul class="nav-tabs">
  <li><a>foo</a></li>
  <li class="active"><a>bar</a></li>
  <li><a>baz</a></li>
  <li><a>boo</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane">
    <div class="tab-body">
      <h1>Foo content</h1>
    </div>
  </div>
  <div class="tab-pane active">
    <div class="tab-body">
      <div style="float:right">
        floating right
      </div>
      <h1>Bar content</h1>
      <div class="clearfix"></div>
      <p>
        This line is wrongly positioned to the bottom of the tabs left, why? And how can it can corrected?
      </p>
    </div>
  </div>
</div>

我不知道到底出了什么问题，因此如何修复它...为了使编辑/修复/尝试更容易，这里是JSFiddle。

Answer 1

试试这个

<强> HTML

<ul class="nav-tabs">
  <li><a>foo</a></li>
  <li class="active"><a>bar</a></li>
  <li><a>baz</a></li>
  <li><a>boo</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane">
    <div class="tab-body">
      <h1>Foo content</h1>
    </div>
  </div>
  <div class="tab-pane active">
    <div class="tab-body">
      <div class="pull-right">
          clearfix
      </div>
     <h1>Bar content</h1>      
      <p>
        This line is wrongly positioned to the bottom of the tabs left, why? And how can it can corrected?
      </p>

    </div>
  </div>
</div>

<强> CSS

* {
  box-sizing: border-box;
}

.clearfix {
  clear: both;
}

.nav-tabs {
  float: left;
  display: block;
  list-style: none;
  padding-left: 0;
  margin: 0 auto 0 0;
  width: 20%;
}

.nav-tabs > li {
  position: relative;
  display: block;
  float: none;
}

.nav-tabs > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
  border: 1px solid transparent;
}

.nav-tabs > li.active > a {
  border-color: blue transparent blue blue;
}

.tab-content > .tab-pane {
  display: none;
}

.tab-content > .tab-pane.active {
  display: block;
}

.tab-body {
  position: relative;
  border: 1px solid red;
  padding: 20px;
  width: 80%;
  margin-left: 20%;
}
.pull-right{
  float:right;
}

<强> demo

块的定位部分影响其他块

1 个答案: