新手,请教一个问题,谢谢!_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:24:20
원래의
1031명이 탐색했습니다.

我在一个div_main中嵌套了三个层,请问怎么才能达到并排排列的效果,第二,三个层我用了绝对定位还是不行,而且感觉中间和右边的层不在main曾里面,请指教,谢谢!
代码:
body {
padding:0px;
background:url(images/beijing1.jpg) #000 repeat left top;
font-family:'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;
color: #CF0;
font-size:12px;
line-height:150%; 
}

#header{ 
         
         MARGIN: auto;
         BORDER: 1px #CCCCCC solid;
 background: url(images/header_beijing.jpg)  #CCC no-repeat left top;
 WIDTH: 1000px;
 HEIGHT: 100px;
 text-align:center
 
 }
 
#div_main{
padding:0px;
width:1000px;
background:url(images/div_main_beijing.jpg) #CCC no-repeat left top;
margin:20px auto auto auto;
border: 1px #CCC solid;

}

#div_left_sidebar{
margin:10px auto 10px 10px;
border:0px #00ff00 solid;
background: url(images/side_beijing.jpg)  #CCC no-repeat left top;
background-size:cover;
width: 200px;
height:600px;
background-size:cover;
}

#div_zhongjian_sidebar{
float:right;
left:220px;
top:10px;
margin:10px auto 10px auto;
border:0px #00ff00 solid;
background: url(images/zhongjian_beijing.jpg)  #CCC no-repeat left top;
background-size:cover;
width: 560px;
height:600px;

}

#div_right_sidebar{
float:right;
left:790px;
top:10px;
margin:10px 10px 10px auto;
border:0px #00ff00 solid;
background: url(images/side_beijing.jpg)  #CCC no-repeat left top;
background-size:cover;
width: 200px;
height:600px;


页面代码:



这里是头部标题 




  

  
  

  
  

  



回复讨论(解决方案)

<style>	body {padding:0px;background:url(images/beijing1.jpg) #000 repeat left top;font-family:'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;color: #CF0;font-size:12px;line-height:150%; }#header{                   MARGIN: auto;         BORDER: 1px #CCCCCC solid; background: url(images/header_beijing.jpg)  #CCC no-repeat left top; WIDTH: 1000px; HEIGHT: 100px; text-align:center  } #div_main{padding:0px;width:1000px;background:url(images/div_main_beijing.jpg) #CCC no-repeat left top;margin:20px auto auto auto;border: 1px #CCC solid;}#div_left_sidebar{margin:10px auto 10px 10px;border:0px #00ff00 solid;background: url(images/side_beijing.jpg)  #CCC no-repeat left top;background-size:cover;width: 200px;height:600px;background-size:cover;float:left;}#div_zhongjian_sidebar{float:left; margin:10px auto 10px auto;border:0px #00ff00 solid;background: url(images/zhongjian_beijing.jpg)  #CCC no-repeat left top;background-size:cover;width: 520px;height:600px;}#div_right_sidebar{float:right; margin:10px 10px 10px auto;border:0px #00ff00 solid;background: url(images/side_beijing.jpg)  #CCC no-repeat left top;background-size:cover;width: 200px;height:600px;}	</style>  <div id="header"><strong>这里是头部标题</strong> </div><div id="div_main">  <div id="div_left_sidebar"></div>    <div id="div_zhongjian_sidebar"></div>    <div id="div_right_sidebar"></div>  </div>
로그인 후 복사

谢谢你,能不能给解释一下这是为什么,还有,为什么左右两边的层,背景图片不能自动适应层的大小啊?

用 float ,width 不能太满,不然会换行
 用 background-size:cover;  背景图片 不能 适应层的大小?

用 float ,width 不能太满,不然会换行
 用 background-size:cover;  背景图片 不能 适应层的大小?
受教了,谢谢,
background-size:cover;这个的问题可能是我图片的长宽比和涂层的长宽比不一样的原因,刚刚上网查了一下,可能是这个原因,谢谢你!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!