html – 具有固定和流体列以及清晰浮动的布局

概述我需要创建一个两列布局： >左柱固定和右柱流体; >每列都有一个带有Head(带有标签和菜单)和Body的窗口. 固定/流体布局正在工作,但在右栏上,头部div(标签)和主体div(窗口2的主体)之间有一个空格： 我创建了一个小提琴示例：http://jsfiddle.net/4sk3bkde/ 当我使用.clear类来清除浮动时,问题似乎发生了： .clear:after { content 我需要创建一个两列布局：

>左柱固定和右柱流体;
>每列都有一个带有head(带有标签和菜单)和Body的窗口.

固定/流体布局正在工作,但在右栏上,头部div(标签)和主体div(窗口2的主体)之间有一个空格：

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

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

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

HTML代码是：

<div >  <div >    <div >      <div >        <ul >          <li>Tab 1</li>          <li>Tab 2</li>        </ul>        <a  href="#">Menu</a>      </div>      <div >        Body of window 1      </div>    </div>  </div>  <div >    <div >      <div >        <ul >          <li>Tab 1</li>          <li>Tab 2</li>        </ul>        <a  href="#">Menu</a>      </div>      <div >        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时为什么会出现此问题？怎么解决这个？

解决方法 除非您尝试模仿表格行为,否则您不希望您的显示器成为表格.

我要做的相关更改是将显示更改为
内联块或内联表

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

正如您在代码段中看到的那样,如果显示为表格,则更改正文内容不会影响流体标题大小.

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

<script src="https://cdnjs.cloudflare.com/AJAX/libs/mootools/1.5.2/mootools-core-compat.min.Js"></script><div >  <div >    <div >      <div >        <ul >          <li>Tab 1</li>          <li>Tab 2</li>        </ul>        <a  href="#">Menu</a>      </div>      <div >        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 >    <div >      <div >        <ul >          <li>Tab 1</li>          <li>Tab 2</li>        </ul>        <a  href="#">Menu</a>      </div>      <div >        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>

总结

以上是内存溢出为你收集整理的html – 具有固定和流体列以及清晰浮动的布局全部内容，希望文章能够帮你解决html – 具有固定和流体列以及清晰浮动的布局所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。