论坛风格切换切换到宽版
  • 37015阅读
  • 2回复

div+css 左右结构 [复制链接]

上一主题 下一主题
离线宁静
 

发帖
3656
金钱
9192033
威望
106545
贡献值
95112
好评度
85360
只看楼主 倒序阅读 0 发表于: 2013-05-05

1、左边固定,右边自适应
<div>   <!--最外层容器-->
      <div   style="float:right;margin:0 0 0 -215px; width:100%">    <!--右边部分容器,这个是重点,"float:right"的div一定要写到前面,否则会出现结构混乱,”margin:0px 0px 0px -215px“是用来为左边的部分空出空间-->    
      <div   style="margin:0 0 0 215px; background:#e4e4e4">这里是右边的内容</div>  <!--”margin:0 0 0 215px“空出左边空间-->  
   </div>
   <div   style="float:left;width:200px; background:#669999">这里左边部分</div>    <!--左边部分容器,有float:left属性的div要放在有float:right属性的div后面,才能保持结构--></div>
————————————————————————————————————————————
2、右边固定,左边自适应,跟上一个最大的不同点就是,左右两个div容器的代码的前后位置换了,原因就是"float:rihgt"一定要在"float:left"前面。
<div>
   <div style="float:right;width:200px; background:#669999">这里右边部分</div>
    <div style="float:left;margin:0 -215px 0 0; width:100%">
    <div style="margin:0 215px 0 0; background:#e4e4e4">这里是左边的内容</div>
</div>
</div>
——————————————————————————————————————————————
完整代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>左右分栏</title>
<h1> 右边自适应 </h1>
<div><!--最外层容器-->
<div style="float:right;margin:0 0 0 -215px; width:100%"><!--右边部分容器,这个是重点,"float:right"的div一定要写到前面,否则会出现结构混乱,”margin:0px 0px 0px -215px“是用来为左边的部分空出空间-->
    <div style="margin:0 0 0 215px; background:#e4e4e4">这里是右边的内容</div><!--”margin:0 0 0 215px“空出左边空间-->
</div>
<div style="float:left;width:215px; background:#669999">这里左边部分</div><!--左边部分容器,有float:left属性的div要放在有float:right属性的div后面,才能保持结构-->
</div>
<div>
<h1> 左边自适应 </h1>
<div style="float:right;width:215px; background:#669999">这里右边部分</div>
<div style="float:left;margin:0 -215px 0 0; width:100%">
    <div style="margin:0 215px 0 0; background:#e4e4e4">这里是左边的内容</div>
</div>
</div>
</body>
</html>
评价一下你浏览此帖子的感受

精彩

感动

搞笑

开心

愤怒

无聊

灌水

网站建设,企业网站推广,户外写真,数码冲印,咨询QQ:124692564
离线宁静

发帖
3656
金钱
9192033
威望
106545
贡献值
95112
好评度
85360
只看该作者 1 发表于: 2013-05-05
display:inline它可以让行内显示为块的元素,变为行内显示,例如
<div> DIV1 </div>
<div> DIV2 </div>
这里DIV1和DIV2分别占一行,但是你给他们加上属性后变了
<div style= "display:inline "> DIV1 </div>
<div style= "display:inline "> DIV2 </div>
DIV1和DIV2这时候显示在同一行了,试试看吧。
和 display:inline 对应的是 display:block,block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素,例如 SPAN 是行内显示的,但是你加了 display:block 属性就不一样了
<span style= "display:block "> SPAN1 </span>
<span style= "display:block "> SPAN2 </span>
display:inline比较经典的用法是用在 <ul> 下的 <li> 中 内联 block一般一个块占一行,除非float inline是自动排为一行,就象段内的文字一样,可成为多行。
display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认display属性是block, 但将div的display设置为inline的话,则多个div可以象span一样显示在一行了。
display:inline 对应不显示为 display:none
display:block 对应不显示为 hidden
说通俗点 样式为none的元素不占位置,而样式为hidden的元素虽然不显示但还是占地方。

网站建设,企业网站推广,户外写真,数码冲印,咨询QQ:124692564
离线千与千寻

发帖
42
金钱
55
威望
230
贡献值
53
好评度
46
只看该作者 2 发表于: 2013-05-15
建一个网站需要多少钱?
快速回复
限100 字节
 
上一个 下一个