html hr位置和长度问题
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #container{ width:90%; margin:0 auto;/*设置整个容器在浏览器中水平居中*/ } #tx{width: 30%; height: 300px; margin-top: 20px; float:left } #px{ width: 65%; height: 350px; margin-left: 10px; margin-top: 30px; background: url("./px/bjsnow.gif"); float:right; } #p{ margin-left: 20px; } #x{ margin-left: 120px; /*margin-top: 40px;*/ } #line{ } </style></head><body><div id="container"> <div id="tx"> <img src="./px/girl.jpg"> </div> <div id="px"> <div id="p"> <img src="px/snow2.jpg"> </div> <div id="x"> <img src="px/snow1.jpg"> </div> </div> <div id="line"> <hr/> </div></div></body></html>
其中水平线只有一点点长，而且不在两幅图下面，
请问怎么修改
第1个回答 2015-08-27
在 #line{｝中加入属性
clear:both;
这条属性的作用是消除上方的各种float属性，所以你的line就可以下去了，而且现在不推荐使用<hr>标签，建议使用border-bottom本回答被提问者和网友采纳
clear:both;
这条属性的作用是消除上方的各种float属性，所以你的line就可以下去了，而且现在不推荐使用<hr>标签，建议使用border-bottom本回答被提问者和网友采纳