用CSS去掉两个div中间的空白

html-css015

用CSS去掉两个div中间的空白,第1张

<!-- 这样试试 --><font face="Arial, Helvetica, sans-serif"></font><html>

<head>

<title>1x</title>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<style type="text/css">

body

.table{

white-space:nowrap；

position:relative

width:1003px

height:auto

border:none

z-index:auto}.mdiv{

width:1003px

height:auto

overflow:hidden

clear:both

}.left{

float:left

width:100px

height:914px

overflow:hidden

clear:left

}.right{

float:right

width:100px

height:914px

overflow:hidden

clear:right

}.middle{

float:left

width:803px

height:914px

}.floor{

width:1003px

height:auto}

</style>

</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<!-- ImageReady Slices (1x.psd) --><div class="table">

<!--顶层-->

<div class="mdiv"><img src="images/1x_01.gif" class="1x_01" width="1003px"></div>

<!--中间-->

<div class="table"><img src="images/1x_09.gif" width="1003px" height="9" alt=""></div>

<div class="left"><img src="images/1x_02.gif" width="100px" height="914" alt=""></div>

<div class="middle"><img src="images/1x_04.gif" width="803" height="379" alt=""></div>

<div class="right"><img src="images/1x_05.gif" width="100px" height="914" alt=""></div>

<!--底层-->

<div class="floor"><img src="images/1x_23.gif" width="1003px"></div>

</div>

<!-- End ImageReady Slices -->

</body>

</html>

1.清除浮动的div默认是不会有高度的，除非你设置了高度。在编辑窗口中，是软件给你展示有一个div的存在而显示的，代码中依然没有改变本质。

2.如果想以类似<div class="clear:both"></div>这种形式清除浮动的话，那你最好将此div放置在有浮动属性的同级元素后面（比如对于你的代码就是li。不过ul的下一级元素只能是li，所以你可以写成这样：<li style="clear:bothheight:0visibility:hidden"></li>）；如果用overflow:auto这种方式，那么这个设置应该放在具有浮动属性元素的父容器中（如你的ul），而且这种方式是可以清除在非ie及ie7+浏览器中的浮动，对ie6无效，那么设置中应该多写上zoom:1等；还有就是伪对象的使用（:after）。有关清除浮动的方式、还有浮动的本质 网上有很多详释，希望你能认真的看下。多理解，那么你才会真正理解其内在，才好驾驭。

用display属性，想隐藏那一段就把代码加在那一段，例子如下

<div style="display:none">

   <h1></h1>

   <ul>

       <li></li>

        <li></li>

   </ul>

</div>