Home >Web Front-end >HTML Tutorial >Newbie, I have a question, thank you! _html/css_WEB-ITnose
I have three layers nested in a div_main. How can I achieve the effect of arranging them side by side? Secondly, I have used absolute positioning for the three layers but it still doesn’t work. Moreover, I feel that the middle and right layers are not inside the main. Please advise, thank you!
Code:
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;
Page code:
1d6e7d87652dd104f173dbf7284e2799
ada442393f9f941237cb0e496c17b0f5
8e99a69fbe029cd4e2b854e244eab143This is the head title128dba7a3a77be0113eb0bea6ea0a5d0
16b28748ea4df4d9c2150843fecfba68
953905bff0c47f29c8ac25136fb0fa1d
709d7bdfc16b2709cdb424fbe29b40e416b28748ea4df4d9c2150843fecfba68
>
7fc0da6ad9059c69fbb4648d84ad9f9616b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
<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>Thank you, can you explain why this is, and why the background images of the left and right layers cannot automatically adapt to the size of the layer? ah?
Use float, the width cannot be too full, otherwise it will wrap.
Use background-size:cover; The background image cannot adapt to the size of the layer?
Use background-size:cover; The background image cannot adapt to the size of the layer?
Thanks for the lesson,
background-size:cover; The problem may be the aspect ratio of my image and The reason why the aspect ratio of the coating is different, I just checked online, it may be this reason, thank you!