设置margin-top无效_html/css_WEB-ITnose

php中文网
发布: 2016-06-21 09:41:03
原创
1667人浏览过

本帖最后由 Jasmine_xiaocao 于 2013-01-25 09:57:12 编辑

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



左右结构-float






头部







    


 左右结构实现方法:left设置float为left浮动,
right设置float为right浮动,可实现左右结构

缺陷:当left高于right时显示会出现问题,footer清除浮动clear:both可解决此问题





 左右结构实现方法:left设置float为left浮动,
right设置float为right浮动,可实现左右结构

缺陷:当left高于right时显示会出现问题,footer清除浮动clear:both可解决此问题








底部







展现效果

我想让底部不要和左边连在一起,但是设置margin-top无效,该怎么设置才行?

回复讨论(解决方案)

padding-top

padding-top

设置padding-top还是不对,效果图:

margin: 外边距
padding: 内边距

你设置底部元素的margin-top或padding-top 或者设置左边元素的padding-buttom都该可以达到目的

margin-top:550px
登录后复制

你可以设置一下 
margin-top:1000px
登录后复制

体会一下  清除浮动的原理 呵呵  

最笨的方法:footer外面再套一个div,给这个div加padding-top!

CSS code?1margin-top:550px
你可以设置一下 
CSS code?1margin-top:1000px
体会一下  清除浮动的原理 呵呵

的确是,设置成margin-top为550以上就对了,可以说下为什么吗?和clear:both有关?我不是很明白,菜鸟,请多指教

#container .left给这个里面加个margin-bottom: 20px;就可以不挨在一起了。

清除浮动 其实 是 元素 给浮动的元素 留出足够多的 垂直外边距 ,给他们腾出地方而已 。你的例子中,如果margin-top小于550  他就没留出足够多的空间嘛

清一下浮动!!!!

首先div不宜套过多的div

<div id="right"> <div class="right">  左右结构实现方法:left设置float为left浮动,right设置float为right浮动,可实现左右结构<br>缺陷:当left高于right时显示会出现问题,footer清除浮动clear:both可解决此问题</div> </div>
登录后复制

可以改为
<div id="right" class="right">  左右结构实现方法:left设置float为left浮动,right设置float为right浮动,可实现左右结构<br>缺陷:当left高于right时显示会出现问题,footer清除浮动clear:both可解决此问题 </div>
登录后复制

右边一样。这个问题最主要的原因是#container没有高度,这种布局方式没有高度的话会造成这个样子

很无语。请注意看楼主贴的图片上的文字。问题的解决办法不就在那么。或者你直接 给 left 加个 margin-bottom:10px;

最笨的方法:footer外面再套一个div,给这个div加padding-top!

这种方法试了,是不行的

首先div不宜套过多的divCSS code?1234567

 
  左右结构实现方法:left设置float为left浮动,right设置float为right浮动,可实现左右结构
缺陷:当left高于right时显示会出现问题,footer清除浮动clear:both可解决此问题
 ……

对的,这样也是可以的

#container .left给这个里面加个margin-bottom: 20px;就可以不挨在一起了。 这样也不行???

很无语。请注意看楼主贴的图片上的文字。问题的解决办法不就在那么。或者你直接 给 left 加个 margin-bottom:10px;

这也是可以的

多谢大家帮忙,问题解决了,看来我还要多学学基础知识,分数不多,大家见谅了

引用 7 楼 xiaojia_37 的回复:#container .left给这个里面加个margin-bottom: 20px;就可以不挨在一起了。这样也不行???

这是可以的

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号