Heim >Web-Frontend >HTML-Tutorial >HTML、CSS中的网页页面布局问题_html/css_WEB-ITnose
HTML、CSS中的网页页面布局问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:50:001060Durchsuche
要写一个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> 这个很简单吧
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：一段代码弄清楚CSS属性display和visibility的差别_html/css_WEB-ITnoseNächster Artikel：如何根据不同的屏幕分辨率来显示不同的图片？_html/css_WEB-ITnose