使用CSS的resize属性实现左右拖拽改变布局大小

html-css017

使用CSS的resize属性实现左右拖拽改变布局大小,第1张

resize属性的具体用法可见MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/resize

实现左右拖拽改变大小时:

HTML

此时的div会出现滚动边框,此时可拖拽的区域只有右下角的一小块。

此时需要将这个区域扩大可进行如下设置。

此时内部文字就被隐藏了,在实际使用时可以通过设置兄弟元素展示文字。

HTML:

CSS

效果链接: http://js.jirengu.com/voleracixe/2/edit

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:select { width: 210px}。

3、浏览器运行index.html页面,此时网页下拉列表的大小被调整为了210px。

把div的宽度固定死,就可以了,不过一般不会那么做,电脑的分辨率不同,宽度固定死了,浏览效果不好

<div align="center" style="width:100%min-width:1300pxheight:800pxbackground:#999padding-top:100px">

<div style="width:1000pxheight:300pxbackground:#fff"></div>

</div>

这里写了个min-width,就不解释原因了