体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

老师为什么article和aside都设置了左浮动，为什么article和aside不在同一行平铺？

来源：2-5 编程练习

localhost999

2020-07-14 18:05:24

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://climg.mukewang.com/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://climg.mukewang.com/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://climg.mukewang.com/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://climg.mukewang.com/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;

}


写回答

6回答

好帮手慕久久

2020-07-15

已采纳

同学你好，如果解除position的注释，那就可以使用“拔河”这种方式实现水平居中，但是需要补全一下代码，如下：

http://img.mukewang.com/climg/5f0e6aa609340ff905010290.jpg

此时section整体就是水平垂直居中的，如下：

http://img.mukewang.com/climg/5f0e6ab00974831909370441.jpg

给section设置个高度，垂直居中的效果会明显些，如下：

http://img.mukewang.com/climg/5f0e6abb097af88e09350458.jpg

同学可以自己尝试一下，看看效果，记住就可以了。

祝学习愉快！

0

好帮手慕久久

2020-07-15

同学你好，你为老师提供的代码中，section的position属性就是注释状态，如下:

http://img.mukewang.com/climg/5f0e5e4809f5aabe06800245.jpg

同学可以检查一下代码，将该注释解除也是可以的。

祝学习愉快！

0
hocalhost999
h 取消position 注释就能正确实现拔河居中吗
h020-07-15
共1条回复

好帮手慕久久

2020-07-15

同学你好，视频里，老师是统一设置了li的定位，如下：

http://img.mukewang.com/climg/5f0e5aad091421ae14100576.jpg

所以它利用的是定位“拔河”，同学可以再查看一下li的样式。

祝学习愉快！

0
hocalhost999
h 老师，那为什么我的定位会被注释掉呢
h020-07-15
共1条回复

好帮手慕久久

2020-07-14

 同学你好，问题解答如下:

“section”的居中，并不是靠定位实现的，而是靠“margin: auto;”实现的，如下：

http://img.mukewang.com/climg/5f0d912109829d6e08880386.jpg

所以此处的定位并没有起到作用。

代码正确，可做如下优化：

左侧内容紧挨父元素，如下：

http://img.mukewang.com/climg/5f0d912f094769e005540331.jpg

可以添加一个间距，如下：

http://img.mukewang.com/climg/5f0d913509b6e95605540237.jpg

当然由于背景色是白色的，也可以不做此优化，同学了解下就行。

祝学习愉快！

0
hocalhost999
h 老师那为什么视频：项目：H5布局 \ 2-3 html5页面布局（表现层_banner）08分16秒那里说的居中“拔河效应”是 top:0; left: 0; bottom: 0; margin: auto; 也没有写定位position呢？那里说的拔河效应也是只有margin: auto;有用处吗？
h020-07-14
共1条回复

localhost999

提问者

2020-07-14

老师实现对吗？之前看的课程居中“拔河效应”（拔河效应源自视频：项目：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://climg.mukewang.com/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://climg.mukewang.com/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://climg.mukewang.com/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://climg.mukewang.com/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://climg.mukewang.com/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;*/
}


0
hocalhost999
h 我这个练习运用了那个视频教的“拔河效应”实现居中，不知道对不对
h020-07-14
共1条回复

好帮手慕久久

2020-07-14

同学你好，由于没有给“aside”标签设置左浮动，所以没在一行平铺，可做如下修改:

http://img.mukewang.com/climg/5f0d889d098af73e05070179.jpg

如果我的回答帮到了你，欢迎采纳，祝学习愉快！

0
hocalhost999
h 老师看我最新回复实现对吗
h020-07-14
共1条回复

0 学习 · 40143 问题

查看课程

相似问题

artice和section为啥都不能浮动在aside右边

回答 2

为什么nav设置右浮动会再header下面？

回答 1

老师，为什么aside下面的dl设置全部没有起作用呢？我应该怎么修改？

回答 2

老师您好，代码是敲完了，可是存在几个问题

回答 3

给nav加了右浮动为什么元素会被挤出contiain？还有logo区的图片文字如何垂直居中

回答 2

打开慕课网App查看更多内容