布局问题（浮动/填充）
[英]Layout Issue (floats/Padding)
问题描述
遇到布局问题，试图了解浮动元素以及如何定位元素。 对CSS / HTML非常新。 有人可以帮助我了解这种布局如何工作。 一些问题：
1）无法在不破坏布局的情况下更改页脚的高度，页脚似乎被向上推。
2）当我通过chrome检查页面时，页脚div包含在代码中的'wrapper'div中。
3）在content div中添加填充似乎也破坏了布局
<!DOCTYPE html>
<html lang="en">
<head>
<title>DCW</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<!--NAV BAR -->
<nav>
<ul>
<div class="float-left">
<li><a class="active" href="default.asp">PD</a></li>
<li><a href="news.asp">Projects</a></li>
<li><a href="About.asp">About</a></li>
<li><a href="Contact.asp">Contact</a></li>
</div>
<div class="float-right">
<li><a href="#">Hire Us!</a></li>
</div>
</ul>
</nav>
<!-- HEADER -->
<header>
<div id="title_wrapper">
</div>
</header>
<!-- BODY CONTENT -->
<div id="wrapper">
<div id="content">
<div class="info">
col1
</div>
<div class="info">
col2
</div>
</div>
<!-- SIDEBAR -->
<div id="sidebar">
<div id="sidebar-text">
content 2
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
Footer
</footer>
</body>
CSS：
html, body
{
width: 100%;
height: 100%;
margin:0;
padding: 0;
}
p.thick {
font-weight: bold;
}
h1, p {
padding: 0;
margin: 0;
}
/*Nav */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav li {
float: left;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
nav li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.float-left {
float:left;
}
.float-right {
float:right;
}
/* Header */
header #title_text{
font-size: 100px;
font-family: arial;
}
header #title_wrapper{
text-align:center;
position: relative;
top: 200px;
}
header {
background-color: orange;
position: relative;
height:100%;
width: 100%;
color:white;
margin:0;
}
/*Content*/
#wrapper{
min-height: 70%;
height: auto;
height: 70%;
}
#content{
float:left;
width:100%;
height: 100%;
text-align: center;
}
#sidebar{
float: left;
background-color: lightgrey;
height: 75%;
text-align: center;
width: 100%;
}
#sidebar-text{
font: 14px/22px normal helvetica, sans-serif;
padding-top: 30px;
text-decoration: none;
line-height: 200%;
}
.img-circle {
border-radius: 50%;
}
.info{
width: 50%;
float: left;
}
blockquote.style2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
outline-style: double;
outline-color: lightgrey;
}
/* footer */
footer{
background-color: orange;
}
干杯
2 个解决方案
解决方案1
0 已采纳 2016-02-29 06:47:13
我的脚注内容确实是+ 200px的填充内容。 除了display:inline-block在页脚上加上box-sizing: border-box;之外，什么都没有改变box-sizing: border-box; 在内容上。
html, body { width: 100%; height: 100%; margin:0; padding: 0; } p.thick { font-weight: bold; } h1, p { padding: 0; margin: 0; } /*Nav */ nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } nav li { float: left; } nav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* Change the link color to #111 (black) on hover */ nav li a:hover { background-color: #111; } .active { background-color: #4CAF50; } .float-left { float:left; } .float-right { float:right; } /* Header */ header #title_text{ font-size: 100px; font-family: arial; } header #title_wrapper{ text-align:center; position: relative; top: 200px; } header { background-color: orange; position: relative; height:100%; width: 100%; color:white; margin:0; } /*Content*/ #wrapper{ min-height: 70%; height: auto; height: 70%; } #content{ float:left; width:100%; height: 100%; text-align: center; padding:100px; box-sizing: border-box; } #sidebar{ float: left; background-color: lightgrey; height: 75%; text-align: center; width: 100%; } #sidebar-text{ font: 14px/22px normal helvetica, sans-serif; padding-top: 30px; text-decoration: none; line-height: 200%; } .img-circle { border-radius: 50%; } .info{ width: 50%; float: left; } blockquote.style2 { font: 14px/22px normal helvetica, sans-serif; margin-top: 10px; margin-bottom: 10px; margin-left: 50px; padding-left: 15px; border-left: 3px solid #ccc; outline-style: double; outline-color: lightgrey; } /* footer */ footer{ display: inline-block; background-color: orange; height:200px; width: 100%; }
<!DOCTYPE html> <html lang="en"> <head> <title>DCW</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <!--NAV BAR --> <nav> <ul> <div class="float-left"> <li><a class="active" href="default.asp">PD</a></li> <li><a href="news.asp">Projects</a></li> <li><a href="About.asp">About</a></li> <li><a href="Contact.asp">Contact</a></li> </div> <div class="float-right"> <li><a href="#">Hire Us!</a></li> </div> </ul> </nav> <!-- HEADER --> <header> <div id="title_wrapper"> </div> </header> <!-- BODY CONTENT --> <div id="wrapper"> <div id="content"> <div class="info"> col1 </div> <div class="info"> col2 </div> </div> <!-- SIDEBAR --> <div id="sidebar"> <div id="sidebar-text"> content 2 </div> </div> </div> <!-- FOOTER --> <footer> Footer </footer> </body>
解决方案2
0 2016-02-29 07:01:25
html的宽度和高度不必为100％，而CSS中的body或div的默认宽度为100％。 您只能在需要时提及宽度。
要为页脚提供高度，只需添加clear：两者都为页脚选择器
页脚{background-color：orange; clear：both; height：50px;}
这将解决问题1和2。添加填充时，设计会中断，因为每次添加宽度时，它都会不断增加已经赋予相同div或元素的当前宽度。 这可以通过重新调整元素宽度或使用box-sizing：border-box来解决。
带浮点的HTML布局
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.