dw怎么把盒子放在页面右面_随笔

1.双击打开Adobe Dreamweaver CC 2018，新建一个HTML5页面模板，输入标题

2.创建完毕后，生成一个HTML5页面，分为上下两个层，一个是代码层，另一个是视图层

3.切换到实时视图，插入一个table，设置行数、列数和标题位置，然后单击确定

4.接着切换到代码视图，添加style标签，使用元素选择器设置表格行间距

5.切换到实时视图，可以查看到表格实时效果，行间距增大

6.保存代码文件为table.html，然后打开浏览器预览，查看表格效果

需求：假设高度默认100px ，请写出三栏布局，其中左栏、右栏各为300px，中间自适应

将左右的div宽度设为300px,分别左右浮动，中间盒子不设宽度。注意：先写右边盒子，再写中间盒子，否则先渲染中间盒子，中间盒子会占满该行剩下的宽度，右边盒子只能换行显示，就会出现下面的情况

正常的渲染效果如下所示：

第二种：绝对定位（position:absolute）

设置父盒子position:relative（相对定位），

三个子盒子position：absolute,

左盒子left:0,

右盒子right:0

中间盒子left:300pxright:300px

第三种：flex布局

父盒子 display:flex

左右盒子设置宽度：300px

中间盒子flex:1(flex-grow:1 flex-shrink:1 flex-basis:0%)不考虑元素尺寸自由伸缩

第四种：grid布局

父盒子display: grid

grid-template-columns:300px auto 300px(分割成3列，宽度分别为300px auto 300px)

grid-template-rows:100px(占一行，行高100px)

html中让div层固定在屏幕中央右边500像素的位置,这个的话，我就需要用html中的position的绝对定位来做，我们需要提前知道的有div距离中间的距离，上边的距离，右边的距离，这三个是需要知道的，这里我写一段代码：

<html>

<head>

<tltle>diV固定位置</tltle>

<style>

div{

width:300px

height:300px

position:absoult

right:500px //只是假设的数据，需要实际测量

top:400px

}

</style>

</head>

<body>

<div>我是测试文字</div>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

dw怎么把盒子放在页面右面