【发布时间】：2016-06-15 18:46:31
【问题描述】：
又是我…… 还有一个问题...
我的问题是正文在标题上方，但它应该在一条直线上。 它从左侧开始，但应该从导航栏开始的地方开始，其他 2 个 Div 应该在导航栏结束的地方结束。
body {
background: black;
font-family: Oswald;
font-size: 20px;
font-weight: normal;
line-height: 1;
margin: 0;
min-width: 960px;
padding: 0;
}
a {
text-decoration: none;
outline: none;
}
a:active {
background: none;
}
img {
border: none;
}
/*-------------------------------------------Header-------------------------------------------*/
h1 {
text-align: left;
font-family: Oswald DemiBold;
font-size: 24px;
color: #A40900;
text-transform: uppercase;
}
h2 {
text-align: left;
font-family: Oswald DemiBold;
font-size: 24px;
color: white;
text-transform: uppercase;
}
p {
color: #252525;
line-height: 20px;
margin: 0;
padding: 0;
text-align: left;
}
p a {
color: #252525;
text-decoration: underline;
}
.border-right {
border-right: 5px solid #A40900;
padding-right: 1px;
}
.border-left {
border-left: 5px solid #A40900;
padding-left: 1px;
}
#header {
margin: 0 auto;
padding: 4px 0 0px;
text-align: center;
width: 960px;
}
#header a.logo {
display: block;
margin: 0 auto;
padding: 0;
width: 540px;
}
#header a.logo img {
border: 0;
display: block;
margin: 0;
padding: 0;
width: 100%;
}
#header ul {
margin: 0;
padding: 0;
background-color: white;
border-top: 5px solid #A40900;
border-bottom: 5px solid #A40900;
padding: 10px 0;
}
#header ul li {
display: inline-block;
list-style: none;
margin: 0px;
padding: 0 10px;
text-align: center;
}
#header ul li a {
color: #000;
font-family: Oswald ExtraLight;
font-size: 20px;
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
text-transform: uppercase;
}
#header ul li a:hover, #header ul li.selected a {
color: #0ba39c;
}
#body {
margin: 0;
padding: 0 0 30px;
text-align: center;
}
#body #welcome {
margin: 5%;
padding: 15px;
position: relative;
width: 35%;
float: left;
background-color: white;
display: inline;
}
#body #navihelp {
float: left;
margin: 5%;
padding: 15px;
position: relative;
background-color: #A40900;
display: inline-block;
width: 35%;
}
#body #contact {
background-color: #A40900;
float: left;
width: 35%;
padding: 15px;
margin: 5%;
display:inline-block;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Willkommen beim Phönix-Brandschutz</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="css/mobile.css">
<script src="js/mobile.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<a href="index.html" class="logo"><img src="images/logo.png" alt=""></a>
<ul id="navigation">
<span id="mobile-navigation"> </span>
<li class="selected border-right">
<a href="index.html">Startseite</a>
</li>
<li class="border-right">
<a href="about.html">Über uns</a>
</li>
<li class="border-right">
<a href="anfahrt.html">Anfahrt</a>
</li>
<li class="border-right">
<a href="leistungen.html">Leistungen</a>
</li>
<li class="border-right">
<a href="anfrage.html">Kontaktanfrage</a>
</li>
<li>
<a href="allgemein.html">Allgemeine Informationen</a>
</li >
<li class="border-left">
<a href="impressum.html">Impressum</a>
</li>
</ul>
</div>
<div id="body">
<div id="welcome">
<h1>Herzlich Willkommen</h1>
<p>
abcdItaepro quibus non ex et quos aliquo vendus si doluptasint restior eniscid ernam, te volut mintectiam et eos voluptatem et que volupta que sequiae. Ut latem auteseque la solumendit que nosti remolo voluptam eum, conem hit ea qui utem idia sed qui id el ma culpa ipid exped quas evellup tiisqui as restrum natia dero temporerum rest re nis id quam inusda sitatibus utas ad quias que inimus eaque parum fugitio beati repedit pe veliquat rendebis aturit quibuscipsae perferro omnissi dolenime porum ari re numquae si aliquia dolum ipsa doloritat.
Dam eate nusto dolut haris dolupta tumquo ommodit ium doluptas quo tem faceprem exerferspis destiam, ipsunte solorio vellaboribus dolorerspe nonsequ odisit etur rernam nus dolor aut odi natius delestore dolupti oressimus ex eicipsumque odit et animus, quassunt, offici volut molor anda samenitem la vero doluptat.
Exped et alibus, coria ped magnia el inus mi, officiisqui dus eiusament omnihilit vellorrum iderrum rati aciisquid magnim con nost que dipiet quo consequas dolum volende bitatis ratio explic tem hariant et, senet ea que namus resendae si officipicil estia volupta turem. Musam, verchitem reicium et, volupta tibusam vendi nem. Ut aspedita quist, ut quos ra quuntur? Ebis antum ut eatemoluptat ommolupti conse comnimagnat fuga. Untis distrupta dolendi omnihit
</p>
</div>
<div id="navihelp">
<h2>Navigation</h2>
<p> abcdItaepro quibus non ex et quos aliquo vendus si doluptasint restior eniscid ernam, te volut mintectiam et eos voluptatem et que volupta que sequiae. Ut latem auteseque la solumendit que nosti remolo voluptam eum, conem hit ea qui utem idia sed qui id el ma culpa ipid exped quas evellup tiisqui as restrum natia dero temporerum rest.
</p>
</div>
<div id="contact">
<h2>Unsere Kontaktdaten:</h2>
<p>abcdItaepro quibus non ex et quos aliquo vendus si doluptasint restior eniscid ernam, te volut mintectiam et eos voluptatem et que volupta que sequiae. Ut latem auteseque la solumendit que nosti remol)</p>
</div>
</div>
</body>
</html>它应该看起来像： Screendesign Body
希望你能帮助我
【问题讨论】：
-
您的
#body与您的header具有不同的边距/填充 -
谢谢！从现在开始我应该仔细编码......
-
您是否必须针对较旧的浏览器（与 Flexbox 不兼容）？因为如果你不这样做，使用 flexbox 可能更容易使两个盒子的高度相同。
-
我想问，但我不认为
标签： html css navigationbar floating document-body