CSS基本浮动布局，页脚的页边距
[英]CSS basic float layout, margin-top for footer
问题描述
我正在尝试使用CSS进行基本布局。
标头
放在一边-内容
页脚
我在页脚放置了页边距属性，但是我不确定为什么它不起作用。 这是我到目前为止的简单代码：
<style> header { width: 100%; height: 100px; border: 1px solid black; margin-bottom: 10px; } aside { width: 100px; height: 200px; border: 1px solid green; float: left; margin-right:10px; } article { height: 200px; width: 200px; border: 1px solid red; float: left; } footer { clear: both; border: 1px solid blue; width: 100%; height: 100px; margin-top: 10px; } </style>
<header> </header> <aside> </aside> <article> </article> <footer> </footer>
您可以在此处看到页脚没有边距： http : //i.imgur.com/PeeTg6I.png
3 个解决方案
解决方案1
2 已采纳 2016-09-23 04:27:24
添加显示：inline-block; 在页脚。
<style> header { width: 100%; height: 100px; border: 1px solid black; margin-bottom: 10px; } aside { width: 100px; height: 200px; border: 1px solid green; float: left; margin-right:10px; } article { height: 200px; width: 200px; border: 1px solid red; float: left; } footer { clear: both; border: 1px solid blue; width: 100%; height: 100px; margin-top: 10px; display: inline-block; } </style>
<header> </header> <aside> </aside> <article> </article> <footer> </footer>
解决方案2
1 2016-09-23 04:30:14
尝试一次
*{ margin:0px; padding:0px; } header { width: 100%; height: 100px; border: 1px solid black; margin-bottom:10px; } aside { width: 100px; height: 200px; border: 1px solid green; float: left; margin-bottom:10px; } article { height: 200px; width: 200px; border: 1px solid red; float: left; margin-bottom:10px; } footer { clear: both; border: 1px solid blue; width: 100%; height: 100px; margin-right:10px; }
<body> <header> </header> <aside> </aside> <article> </article> <footer> </footer> </body>
解决方案3
0 2016-09-23 05:35:26
body{
font-family:Arial, Helvetica, sans-serif;
}
header{
border-radius:10px;
padding:10px 1%;
margin:10px 1%;
background-color:#066;
text-align:center;
}
article{
background-color:#066;
width:50%;
height:100%;
float:left;
border-radius:10px;
text-align:center;
margin:10px;
}
content{
background-color:#066;
width:40%;
height:100%;
border-radius:10px;
text-align:center;
margin:10px;
float:right;
}
footer{
clear:both;
border-radius:10px;
background-color:#066;
text-align:center;
padding:10px;
margin:10px;
}
<header>
<h2>Header</h2>
</header>
<article>
<h2>Aside</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id odio velit. Praesent orci lectus, fermentum vel ullamcorper vel, pharetra ac elit. Fusce eu sapien ac ligula tempor fermentum. Sed vulputate rutrum mattis. Ut et metus ac lectus fermentum porttitor.</p>
</article>
<content>
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id odio velit. Praesent orci lectus, fermentum vel ullamcorper vel, pharetra ac elit. Fusce eu sapien ac ligula tempor fermentum. Sed vulputate rutrum mattis. Ut et metus ac lectus fermentum porttitor. </p>
</content>
<footer>
<h2>Footer</h2>
</footer>
带有页边距的CSS粘性页脚
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.