Rumah > hujung hadapan web > html tutorial > 一列div宽度固定、一列div宽度自适应_html/css_WEB-ITnose

一列div宽度固定、一列div宽度自适应_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:31:23
asal
1285 orang telah melayarinya

一列固定、一列宽度自适应:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
之前的代码中,已经介绍过一列宽度自适应和二列宽度自适应,实现自适应的效果一般就是将相应对象的宽度以百分比的形式表示。在实际的布局中,一列宽度固定、一列宽度自适应。下面我们就以左侧div宽度固定,右侧div宽度是自适应为例。
代码实例:

<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css">body{  margin:0px;  padding:0px;}.left{  width:200px;  height:50px;  background-color:green;  position:absolute;  left:0px;}.right{  height:50px;  background-color:blue;  margin-left:200px;}</style></head><body><div class="left">我是左边</div><div class="right">我是右边</div></body></html>
Salin selepas log masuk

以上代码中左栏div宽度是固定值200px,并且将其进行绝对定位,这样它就脱离文档流了,不会对周围的div定位造成影响。这个时候设置右边div的左外边距等于左边div的宽度,且不设置此div的宽度以达到宽度自使用效果。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4767

更多内容可以参阅:http://www.softwhy.com/divcss/

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan