为了账号安全,请及时绑定邮箱和手机立即绑定

关于HTML的布局问题,没搞懂,希望有人能解答一下

关于HTML的布局问题,没搞懂,希望有人能解答一下

王小伙吖 2016-03-13 17:04:32
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .header{width:960px;height:60px;padding:0} .img-logo{width:120px;height:60px;margin:0} .header_in{width:840px;height:60px;margin:0;background:#ccc} </style> </head> <body> <div class="header"> <div class="img-logo"></div> <div class="header_in"> </div> </div> </body> </html>在DW中 header_in 没有出现在 header 块元素的内部右侧,但 img-logo 块元素没有出现问题,我知道块元素都是由上至下分布,但为什么 img-logo 块元素没有出现这样的问题,我现在也能利用relative将 header-in 调整到 head 的内部右侧,同时我发现对 header_in 设置 margin-left时,margin是相对最外一层的 header 移动的,而不是 相对 img-logo 元素,这是为什么?margin不是相对于相邻元素的边距吗,怎么会和左侧离他较远的父级元素 header 产生交集呢,为什么不是img-logo?文笔措辞不是很好,希望有前辈能解答一下,自己学做网页的时候卡在这很多天了!
查看完整描述

1 回答

已采纳
?
Thisis

TA贡献1条经验 获得超2个赞

父元素header的高只有60px,所以不能支持你里面的两个元素自上而下分布。你可以给里面的两个元素设置浮动float

查看完整回答
2 反对 回复 2016-03-13
  • 王小伙吖
    王小伙吖
    我给块元素header_in 设置了margin:-60px 0 0 120px,现在显示倒是如我所愿了,但不知道这个方法对不对,另外,现在两个元素我都设置了float:left;
  • Thisis
    Thisis
    你不是想父元素包含里面的两个子元素吗?
  • 1 回答
  • 0 关注
  • 1375 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号