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

小杨同学呀 2019-10-28

源自：项目：H5布局 3-2 项目作业

收起

2回答

好帮手慕夭夭回答被采纳获得+3积分 2019-10-28 15:20:59

你好同学，这是因为两个盒子设置了边框，边框包含在实际宽度中的。由于一个盒子宽度设置12%，一个设置了88%，再加上边框占据的宽度，早就超出了页面宽度的100%了，所以第二个盒子放不下还是被挤到下一行显示哦。你把边框去掉就可以浮动在一块显示了。（为了看到效果，可以给盒子设置不同的背景色）

不过在本作业中，要求使用表格布局，所以同学参考如下修改一下布局哦。

中间分一行两列显示

然后给td设置边框，表格的td是不会自己换行显示的。（即使宽度超出了，设置的宽度会无效，一行的td还是会在一行显示）。这里表格会把页面除去边框的宽度，然后再把剩余的空间，按照12%和88%的宽度去分配。

代码如下：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}

header {
background-color: blue;
width: 100%;
height: 60px;
}

header>img {
margin-top: 10px;
}

.left {
height: 800px;
width: 12%;
border: 1px solid black;
}

.right {
border: 1px solid red;
width: 88%;
height: 800px;
}
</style>
</head>

<body>

<header>
<img src="img/logo.png">
</header>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>

<td class="left">
<table cellpadding="0" cellspacing="0">
</table>
</td>

<td class="right">
<table cellpadding="0" cellspacing="0">
</table>
</td>
</tr>
</table>
<section> </section>

<footer></footer>
</body>

</html>

祝学习愉快，望采纳。

收起回答

好帮手慕夭夭 2019-10-28 12:10:10

你好同学，从截图上，并没有看到section ，同学问的是artice为什么没有和aside在一行显示吧。

如果只给artice设置浮动，那么它会在它原位置上浮动哦。如果需要它与上面的元素在一行浮动，需要给上面的aside也设置浮动。自己改一下哦，如果没有实现效果，建议把全部代码粘贴到问答区(不要截图) ,以便老师准确高效的为你查找问题哦。

祝学习愉快，望采纳。

收起回答

提问者小杨同学呀 #1

<body>  <header> <img src="img/logo.png"> </header>  <aside></aside>  <section> </section>  <footer></footer> </body> </html> *{ margin:0; padding:0; } header{ background-color:blue; width:100%; height:60px; } header > img{ margin-top:10px; } aside{ height:800px; width:12%; border:1px solid black; float:left; } section{ border:1px solid red; width:88%; height:800px; float:left; }

2019-10-28 13:05:10
提问者小杨同学呀 #2

老师您好。我试了浮动不过去只能定位过去

2019-10-28 13:09:45