div+css 左右结构

最新推荐文章于 2023-10-11 10:32:33 发布

窦小豆

最新推荐文章于 2023-10-11 10:32:33 发布

阅读量3.4k

点赞数

分类专栏： php thinkphp asp 文章标签： div css float html

php 同时被 3 个专栏收录

102 篇文章 0 订阅

订阅专栏

thinkphp

95 篇文章 0 订阅

订阅专栏

asp

62 篇文章 0 订阅

订阅专栏

div+css 左右结构

1、左边固定，右边自适应

<div>   
      <div   style="float:right;margin:0 0 0 -215px; width:100%">    
      <div   style="margin:0 0 0 215px; background:#e4e4e4">这里是右边的内容</div>  
   </div>
   <div   style="float:left;width:200px; background:#669999">这里左边部分</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%">
<div style="margin:0 0 0 215px; background:#e4e4e4">这里是右边的内容</div>
</div>
<div style="float:left;width:215px; background:#669999">这里左边部分</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>