<div class="one">流体布局</div><div class="two">布局</div>
.one{width:80%; font-size:em(设置自体的大小,em可以让自体根据浏览器不同而更加优与阅读);}
.two{width:20%;font-size:em;}
注:通过这样设置,就可能拉动浏览器,盒模型的宽度就会随着你的拉动而变大缩小,但也是有一定限度的。
扩展资料:
关于div的用法
1、<div> 可定义文档中的分区或节(division/section)。
2、<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。
3、<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
举个例子,
<div class="one">流体布局</div><div class="two">布局</div>
.one{width:80%; font-size:em(设置自体的大小,em可以让自体根据浏览器不同而更加优与阅读);}
.two{width:20%;font-size:em;}
通过这样设置,就可能拉动浏览器,盒模型的宽度就会随着你的拉动而变大缩小,但也是有一定限度的,具体你可以自己去尝试,看看缩小到什么地步,盒子就会错位。
<html>
<head>
<style>
#div1{
width:auto;
height:auto;
}
</style>
</head>
<body>
<div id='div1'>
<p>我是测试文字</p>
</div>
</body>
</html>
这个完全不能满足我的要求啊,我需要的是我的div是跟随着某条线变化的,
某条线??不明白