CSS+DIV左中右布局时,右边老是掉下去,请帮忙在我的代码上修改!谢谢!
答案:3 悬赏:0 手机版
解决时间 2021-11-20 08:03
- 提问者网友:呐年旧曙光
- 2021-11-19 14:19
CSS+DIV左中右布局时,右边老是掉下去,请帮忙在我的代码上修改!谢谢!
最佳答案
- 五星知识达人网友:千夜
- 2021-11-19 15:35
你光贴 CSS 是想让我们帮你写 HTML 代码吗?追问下面是html代码,谢谢!
追答可以贴代码吗?不要贴图片,我们没法复制的追问贴好了,我已经补充了问题,现在可以复制了。谢谢!追答background 颜色你自己去掉了,我只是为了看起来方便点。你的代码有点乱,顺便帮你优化了下
* {
margin: 0;
padding: 0;
}
body {
margin: 1px 0 0 0;
text-align: center;
font-size: 12px;
font-family: Arial, helvetica, Sans-Serif;
}
#container {
margin: 0 auto;
width: 700px;
text-align: left;
}
#main {
width: 700px;
height: 900px;
text-align: center;
}
#clatest {
float: left;
width: 175px;
height: 100%;
background-color: red;
}
#middle {
padding: 10px;
margin-left: 175px;
height: 100%;
width: 350px;
background-color: yellow;
box-sizing: border-box;
}
#c3,
#e3 {
float: left;
width: 165px;
height: 100%;
background-color: blue;
}
#e3 {
background-color: green;
}
#elatest {
float: right;
width: 175px;
height: 100%;
margin-top: -900px;
background-color: orange;
}
#cleixing,
#czuozhe,
#cniandai,
#eleixing,
#ezuozhe,
#eguoji {
height: 30%;
width: 175px;
box-sizing: border-box;
}追问按你的代码测试了结果如下图,elatest橙色的部分比左边3部分都高出一截,和我上面的文字重叠了,怎么回事?
追答我没 IE,不知道你什么情况,Safari/Firefox/Chrome 里都是好的
还有就是你上面的文字部分用 float 了没有,用了的话要清除浮动下面才不会错位
追答可以贴代码吗?不要贴图片,我们没法复制的追问贴好了,我已经补充了问题,现在可以复制了。谢谢!追答background 颜色你自己去掉了,我只是为了看起来方便点。你的代码有点乱,顺便帮你优化了下
* {
margin: 0;
padding: 0;
}
body {
margin: 1px 0 0 0;
text-align: center;
font-size: 12px;
font-family: Arial, helvetica, Sans-Serif;
}
#container {
margin: 0 auto;
width: 700px;
text-align: left;
}
#main {
width: 700px;
height: 900px;
text-align: center;
}
#clatest {
float: left;
width: 175px;
height: 100%;
background-color: red;
}
#middle {
padding: 10px;
margin-left: 175px;
height: 100%;
width: 350px;
background-color: yellow;
box-sizing: border-box;
}
#c3,
#e3 {
float: left;
width: 165px;
height: 100%;
background-color: blue;
}
#e3 {
background-color: green;
}
#elatest {
float: right;
width: 175px;
height: 100%;
margin-top: -900px;
background-color: orange;
}
#cleixing,
#czuozhe,
#cniandai,
#eleixing,
#ezuozhe,
#eguoji {
height: 30%;
width: 175px;
box-sizing: border-box;
}追问按你的代码测试了结果如下图,elatest橙色的部分比左边3部分都高出一截,和我上面的文字重叠了,怎么回事?
追答我没 IE,不知道你什么情况,Safari/Firefox/Chrome 里都是好的
还有就是你上面的文字部分用 float 了没有,用了的话要清除浮动下面才不会错位
全部回答
- 1楼网友:神也偏爱
- 2021-11-19 17:05
html代码呢,发上来,那部分掉下去追问elatest掉下去!
我已经补充了问题,可以复制代码,请帮忙测试下。谢谢!
我已经补充了问题,可以复制代码,请帮忙测试下。谢谢!
- 2楼网友:北城痞子
- 2021-11-19 15:40
#middle
{
padding:10px;-----这里改为0px试试?!
你总共只有700的宽,4个等分的话1个是175,这里padding去了20就不对了追问按你说的改了不对!
我已经补充了问题,可以复制代码,请帮忙测试下。谢谢!
{
padding:10px;-----这里改为0px试试?!
你总共只有700的宽,4个等分的话1个是175,这里padding去了20就不对了追问按你说的改了不对!
我已经补充了问题,可以复制代码,请帮忙测试下。谢谢!
我要举报
如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
大家都在看
推荐资讯