Home > Article > Web Front-end > Web page layout issues in HTML and CSS_html/css_WEB-ITnose
Web page layout issues in HTML and CSS_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:50:001039browse
To write an HTML page with 6 dc6dce4a544fdca2df29d5ac0ea9906b, use CSS to implement the layout of the dc6dce4a544fdca2df29d5ac0ea9906b elements. The format is as follows:
Then in CSS How should I write it? ? Ask for expert advice
Reply to the discussion (solution)
<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> After testing, under IE7, the code above Displayed as shown
Modify as follows:
<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> This is very simple, right
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