Home > Article > Web Front-end > HTML、CSS中的网页页面布局问题_html/css_WEB-ITnose
HTML、CSS中的网页页面布局问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:50:001012browse
要写一个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> 这个很简单吧
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：一段代码弄清楚CSS属性display和visibility的差别_html/css_WEB-ITnoseNext article：如何根据不同的屏幕分辨率来显示不同的图片？_html/css_WEB-ITnose