Rumah >hujung hadapan web >html tutorial >HTML、CSS中的网页页面布局问题_html/css_WEB-ITnose
HTML、CSS中的网页页面布局问题_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:50:001055semak imbas
要写一个HTML页面，其中有6个
，用CSS实现其中
元素布局，格式如下所示：
那么在CSS中应该怎么写了？？求高手指教
那么在CSS中应该怎么写了？？求高手指教
回复讨论(解决方案)
<div class="d1"></div><div class="dc"><div class="d2"></div><div class="d3"></div></div><div class="dc"><div class="d4"></div><div class="d5"></div></div><div class="d6"></div><style> *{margin:0px;padding:0px;} div{border:5px solid #000;margin-top:10px;} .dc{border:none;} .d1,.d6{width:500px;height:80px;} .dc div{float:left;width:200px;height:100px;} .d3,.d5{margin-left:90px;} .dc:after{display: block;content: '';clear: both;visibility: hidden; }</style> 经过测试，在IE7下，楼上的代码显示如图
修改如下：
<html><head> <style> *{margin:0px;padding:0px;} div{border:5px solid #000;margin-top:10px;} .dc{border:none;width:600px;} .d1,.d6{width:500px;height:50px;} .dc div{float:left;width:200px;height:100px;} .d3{margin-left:90px;} .dc .d4,.dc .d5{width:220px;} .d5{margin-left:50px;} .dc:after{display: block;content: '';clear: both;visibility: hidden; } </style></head><body><div class="d1">div_01</div><div class="dc"> <div class="d2">div_02</div> <div class="d3">div_03</div></div><div class="dc"> <div class="d4">div_04</div> <div class="d5">div_05</div></div><div class="d6">div_06</div></body></html> 这个很简单吧
Kenyataan：
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
Artikel sebelumnya：一段代码弄清楚CSS属性display和visibility的差别_html/css_WEB-ITnoseArtikel seterusnya：如何根据不同的屏幕分辨率来显示不同的图片？_html/css_WEB-ITnose