负边距的"左边固定宽,右边自适应宽"。

转载 (原文地址) ErikLiao 随笔 待整理 1317阅读 2014-08-23 11:11:21 举报

之前有大神写了用负边距实现的"左边固定,右边自适应"的布局.自己照着写了一个.

结构式left在前面,right在后面.

<div id="left"><h1>Left Sidebar</h1></div>
<div id="container">
<div id="right"><div><h1>Content</h1></div></div>
</div>

代码片段 1

评论 ( 4 )
最新评论
ErikLiao 3F 2014-08-25 16:42:42 4F

加个页脚就被盖住了

Jassion.jiang 2014-08-25 15:56:49 3F

举个具体的例子我们探讨下,因为之前我都是按照这样来写的 - -

ErikLiao 2014-08-25 15:41:16 2F

是可以  挺好的啊~ 但是要是头部高度变化怎么办啊,会把头部盖住吧

Jassion.jiang 2014-08-25 10:09:56 1F

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左边宽度固定,右边自适应宽度</title>
</head>
<body>
    <div style="height:100px;border:1px solid;width:100px;position:absolute;"></div>
    <div style="height:100px;border:1px solid red;margin-left:105px;"></div>
</body>
</html>

我觉得用这种方法更简单,左边绝对定位,右边的margin-