采用固定和流体柱以及透明浮子的布局

Question

我需要创建一个两列布局：

1. 左柱固定和右柱液;
2. 每列都有一个带有Head（带有标签和菜单）和Body的窗口。

固定/流体布局正在运行，但在右栏上，头部div（标签）和主体div（窗口2的主体）之间有一个空间：



我创建了一个小提琴示例：http://jsfiddle.net/4sk3bkde/

当我使用 .clear 类来清除浮动时，问题似乎发生了：

.clear:after {
  content: "";
  display: table;
  clear: both;
}

HTML代码为：

<div class="wrapper clear">

  <div class="fixed">

    <div class="window">
      <div class="head clear">
        <ul class="tabs clear">
          <li>Tab 1</li>
          <li>Tab 2</li>
        </ul>
        <a class="menu" href="#">Menu</a>
      </div>
      <div class="body">
        Body of window 1
      </div>
    </div>

  </div>

  <div class="fluid">

    <div class="window">
      <div class="head clear">
        <ul class="tabs clear">
          <li>Tab 1</li>
          <li>Tab 2</li>
        </ul>
        <a class="menu" href="#">Menu</a>
      </div>
      <div class="body">
        Body of window 2
      </div>
    </div>

  </div>

</div>

CSS代码为：

.clear:after {
  content: "";
  display: table;
  clear: both;
}

.fluid,
.fixed {
  border: 1px solid black;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.fixed {
  float: left;
  width: 250px;
}

.fluid {
  margin-left: 250px;
}

div.window {
}

div.head {
  border: 1px solid red;
}

ul.tabs {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  float: left;
}

ul.tabs li {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  float: left;
}

a {
  display: inline-block;
  float: right;
}

使用clear时为什么会出现此问题？如何解决这个问题？

Answer 1

除非您尝试模仿表格行为，否则您不希望您的显示器成为表格。

我要做的相关更改是将display更改为 inline-block或inline-table

.clear:after {
  content: "";
  display: inline-block;
  clear: both;
}

正如您在代码段中看到的那样，如果display为table，则更改正文内容不会影响流体标题大小。

＆＃13;

＆＃13;

.clear:after {
  content: "";
  display: inline-table;
  clear: both;
}

.fluid,
.fixed {
  border: 1px solid black;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.fixed {
  float: left;
  width: 250px;
}

.fluid {
  margin-left: 250px;
}

div.window {
}

div.head {
  border: 1px solid red;
}

ul.tabs {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  float: left;
}

ul.tabs li {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  float: left;
}

a {
  display: inline-block;
  float: right;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.5.2/mootools-core-compat.min.js"></script>
<div class="wrapper clear">

  <div class="fixed">

    <div class="window">
      <div class="head clear">
        <ul class="tabs clear">
          <li>Tab 1</li>
          <li>Tab 2</li>
        </ul>
        <a class="menu" href="#">Menu</a>
      </div>
      <div class="body">
        Body of window 1<br>
        Body of window 1<br>
        Body of window 1<br>
        Body of window 1<br>
        Body of window 1<br>
      </div>
    </div>

  </div>

  <div class="fluid">

    <div class="window">
      <div class="head clear">
        <ul class="tabs clear">
          <li>Tab 1</li>
          <li>Tab 2</li>
        </ul>
        <a class="menu" href="#">Menu</a>
      </div>
      <div class="body">
        Body of window 2<br>
        Body of window 2<br>
        Body of window 2<br>
        Body of window 2<br>
        Body of window 2<br>
        
      </div>
    </div>

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

给予流体类右浮动并设置宽度。 https://goo.gl/I6nLss Bcoz流体样式不是浮动的，而是固定的浮动