renqian1320 发表于 2006-4-24 13:55
css+div布局问题：有点经验的来看看这个问题
<P>我用div布局一个２行３列的的页面，但是我有个凝问？<BR>代码如下<BR><style type="text/css"><BR>#header{width:100%; height:auto;}<BR>#wrap{ width:100%; height:auto;}<BR>#column{ float:left; width:60%;}<BR>#column1{ float:left; width:30%;background-color:#FF0000;}<BR>#column2{ float:right; width:30%;background-color:#FFFF00;}<BR>#column3{ float:right; width:40%;background-color:#00FF00;}<BR>.clear{ clear:both;} <BR></style><BR><div id="header">这里是顶行</div><BR><div id="warp"><BR> <div id="column"><BR> <div id="column1">这里是第一列</div><BR> <div id="column2">这里是第二列</div><BR> <div class="clear"></div><BR> </div><BR> <div id="column3">这里是第三列</div><BR> <div class="clear"></div><BR></div></P>
<P> 我Ｆ12后 这个布局外观是出来了，但是我发现第二行的第二列和第一列有个空白，请问有什么方法可以解决这个问题，急</P>
renqian1320 发表于 2006-4-24 15:48
<P>我用这个代码，用float布局一个３列的布局，虽然从外观上可以实现，但是不知道，这样布局行不行．<BR><style type="text/css"><BR>#m{width:100%;height:50%;}<BR>#n{float:left;width:40%;background-color:#CC9900;}<BR>#b{float:left;width:40%;background-color:#FF0000;}<BR>#f{background-color:#999999;}<BR></style><BR><div id="m"><BR> <div id="n">我的爱人</div><BR> <div id="b">我的朋友</div><BR> <div id="f"> 我的通货</div><BR></div> <BR>上面我试过了，３列都在一条线上，不知道对不对？<BR>上面的那个代码，我是在别人的网页看到的，难道他门弄错了？<BR>还是什么？我用这个就能轻松实现３列的布局．请高手指点？</P>
renqian1320 发表于 2006-4-24 16:23
<style type="text/css"><BR>#m{width:100%;height:50%;}<BR>#n{float:left;width:40%;background-color:#CC9900;}<BR>#b{float:left;width:40%;background-color:#FF0000;}<BR>#f{background-color:#999999;float:left;}<BR></style><BR><div id="m"><BR> <div id="n">这是第一列</div><BR> <div id="b">这是第二列</div><BR> <div id="f">这是第三列</div><BR></div> <BR>这样也可以．我试了几次，发现在f的规则中，如果加了宽度则会自动换行，不会在一条线中显示，如果把f规则设置成float:right;虽然在同一条线上，但是中间会多了个空白．但是这样就不能设置第３列的宽度了？郁闷 还是没解决，高手哪去了？
renqian1320 发表于 2006-4-24 16:37
<style type="text/css"><BR>#m{width:100%;height:auto;}<BR>#n{float:left;width:40%;background-color:#CC9900;}<BR>#b{float:left;width:40%;background-color:#FF0000;}<BR>#f{background-color:#999999;}<BR></style><BR><div id="m"><BR><div id="n">这是第一列</div><BR><div id="b">这是第二列</div><BR><div id="f">这是第三列</div><BR></div> <BR>这样就可以自自己解决第３列的高度，<BR>ＯＫ了，我要是有什么理解错了的，见笑了，完全自己摸索的
renqian1320 发表于 2006-4-24 16:39
<P>有没有css布局的行家，进来指点下小弟．关于布局一个多列并在同一条线上的问题．虽然我自己摸索实现了，但我怕理解错了，有问题．</P>
renqian1320 发表于 2006-4-24 16:49
问题还是出来了，哎，<BR>style type="text/css"><BR>#m{width:100%;height:auto;}<BR>#n{float:left;width:40%;background-color:#CC9900;}<BR>#b{float:left;width:40%;background-color:#FF0000;}<BR>#f{background-color:#999999;}<BR></style><BR><div id="m"><BR><div id="n">这是第一列</div><BR><div id="b">这是第二列</div><BR><div id="f">这是第三列</div><BR></div> <BR>想上面这样的代码 弄３列出来是可以，但是要４列呢？<BR>就解决不了[em08][em08][em08][em08][em08]
bestlife 发表于 2006-4-25 15:00
<P>[CODE]<BR><style type="text/css"><BR>#wrap{ width:100%; height:auto;}<BR>#column{ float:left; width:80%;}<BR>#column1{ float:left; width:15%;background-color:#FF0000;}<BR>#column2{ float:left; width:15%;background-color:#00FF00;}<BR>#column3{ float:left; width:15%;background-color:#0000FF;}<BR>#column4{ float:left; width:15%;background-color:#FFFF00;}<BR>#column5{ float:left; width:15%;background-color:#FF00FF;}<BR>#column6{ float:left; width:15%;background-color:#00FFFF;}<BR></style></P>
<P><div id="warp"><BR> <div id="column"><BR> <div id="column1">这里是第一列</div><BR> <div id="column2">这里是第二列</div><BR> <div id="column3">这里是第三列</div><BR> <div id="column4">这里是第四列</div><BR> <div id="column5">这里是第五列</div><BR> <div id="column6">这里是第六列</div><BR> </div><BR></div><BR>[/CODE]</P>
renqian1320 发表于 2006-4-25 17:13
谢谢版主了．
lele2007 发表于 2008-2-21 21:54
<style type="text/css">
<!--
#all {
height: 20px;
width: 900px;
}
#all #all_left {
height: 20px;
width: 300px;
float: left;
background-color: #00FF00;
}
#all #all_middle {
background-color: #FFFF00;
float: left;
height: 20px;
width: 300px;
}
#all #all_right {
background-color: #99FFFF;
float: right;
height: 20px;
width: 300px;
}
-->
</style>
<div id="all">
<div id="all_left">这里是第一列</div>
<div id="all_middle">这里是第二列</div>
<div id="all_right">这里是第三列</div>
</div>
-------------------------------
这样也可以，呵呵
页:
[1]
