老师为什么article和aside都设置了左浮动，为什么article和aside不在同一行平铺？
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IMOOC</title> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <section> <aside> <div> <h1> Recent <span class="grey">Course</span> </h1> </div> <div class="aside1and2"> <div class="aside1"> <img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png" alt="icon"> <div class="number">1</div> </div> <div class="aside2"> <span class="bold">HyperTextMarkipLanguage</span><br> HTML is the standard markup language used to create web pages and its elements form the bullding blocks of all websites. </div> </div> <div class="aside1and2"> <div class="aside1"> <img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png" alt="icon"> <div class="number">2</div> </div> <div class="aside2"> <span class="bold">HyperTextMarkipLanguage</span><br> HTML is the standard markup language used to create web pages and its elements form the bullding blocks of all websites. </div> </div> <div class="aside1and2"> <div class="aside1"> <img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png" alt="icon"> <div class="number">3</div> </div> <div class="aside2"> <span class="bold">HyperTextMarkipLanguage</span><br> HTML is the standard markup language used to create web pages and its elements form the bullding blocks of all websites. </div> </div> <div class="aside1and2"> <div class="aside1"> <img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png" alt="icon"> <div class="number">4</div> </div> <div class="aside2"> <span class="bold">HyperTextMarkipLanguage</span><br> HTML is the standard markup language used to create web pages and its elements form the bullding blocks of all websites. </div> </div> </aside> <article> <h1>11</h1> </article> </section> </body> </html>
CSS
aside{
width:600px;
background-color: green;
}
.aside1{
float:left;
position: relative;
}
.aside2{
float:left;
margin-left:10px;
line-height: 25px;
width: 500px;
}
.bold{
text-decoration: underline;
font-weight: bold;
}
.number{
position: absolute;
left: 19px;
top:10px;
color: white;
font-size: 25px;
}
.aside1and2{
/*position: relative;*/
width:600px;
padding-bottom: 100px;
/*height:1000px */
}
.grey{
color:grey;
}
h1{
font-size: 30px;
}
article{
float: left;
width: 800px;
background-color: pink;
}25
收起
正在回答
6回答
同学你好，如果解除position的注释，那就可以使用“拔河”这种方式实现水平居中，但是需要补全一下代码，如下：
此时section整体就是水平垂直居中的，如下：
给section设置个高度，垂直居中的效果会明显些，如下：
同学可以自己尝试一下，看看效果，记住就可以了。
祝学习愉快！
localhost999
2020-07-14 18:38:31
老师实现对吗？之前看的课程居中“拔河效应”（拔河效应源自视频：项目：H5布局 \ 2-3 html5页面布局（表现层_banner）），这里为什么不用定位就可以直接使用top这些定位呢？我用这个实现的居中对吗？
section{
top:0;
left: 0;
bottom: 0;
margin: auto;
width:1400px;
}
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IMOOC</title> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <section> <aside> <div> <h1> Recent <span class="grey">Course</span> </h1> </div> <div class="aside1and2"> <div class="aside1"> <img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png" alt="icon"> <div class="number">1</div> </div> <div class="aside2"> <span class="bold">HyperTextMarkipLanguage</span><br> HTML is the standard markup language used to create web pages and its elements form the bullding blocks of all websites. </div> </div> <div class="aside1and2"> <div class="aside1"> <img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png" alt="icon"> <div class="number">2</div> </div> <div class="aside2"> <span class="bold">HyperTextMarkipLanguage</span><br> HTML is the standard markup language used to create web pages and its elements form the bullding blocks of all websites. </div> </div> <div class="aside1and2"> <div class="aside1"> <img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png" alt="icon"> <div class="number">3</div> </div> <div class="aside2"> <span class="bold">HyperTextMarkipLanguage</span><br> HTML is the standard markup language used to create web pages and its elements form the bullding blocks of all websites. </div> </div> <div class="aside1and2"> <div class="aside1"> <img src="http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png" alt="icon"> <div class="number">4</div> </div> <div class="aside2"> <span class="bold">HyperTextMarkipLanguage</span><br> HTML is the standard markup language used to create web pages and its elements form the bullding blocks of all websites. </div> </div> </aside> <article> <h1>Welcome to <span class="grey"> Massive Open Online Course<span></h1> <p> We provide the latest knowiedge to help you cope with the changing world! </p> <img src="http://img1.sycdn.imooc.com/climg//582e61180001ede703300130.jpg" width="750px"/> <p> We hope that all the syudents who love the lntemet can be more convenient access to learning resources,using the lnternet thinking to change our leaming. </p> <p> Focus on IT skills education MOOC,consistent with the development trend of the lnternet down to earth's MOOC.We are free,we only teach useful, we concentrate on education. </p> </article> </section> </body> </html>
CSS
aside{
width:600px;
/*background-color: green;*/
float: left;
}
section{
/*position: absolute;*/
top:0;
left: 0;
bottom: 0;
margin: auto;
width:1400px;
}
.aside1{
float:left;
position: relative;
}
.aside2{
float:left;
margin-left:10px;
line-height: 25px;
width: 500px;
}
.bold{
text-decoration: underline;
font-weight: bold;
}
.number{
position: absolute;
left: 19px;
top:10px;
color: white;
font-size: 25px;
}
.aside1and2{
/*position: relative;*/
width:600px;
padding-bottom: 100px;
/*height:1000px */
}
.grey{
color:grey;
}
h1{
font-size: 30px;
}
article{
float: left;
width: 800px;
/*background-color: pink;*/
/* position: absolute;
left: 600px;
top:0;*/
}
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星