又是我... 有另一个问题...
我的问题是正文在标题上方，但它应该排成一条直线。 它从左边开始，但它应该从导航栏开始的地方开始，其他 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
希望你能帮助我
最佳答案
修复#2:
只需将 margin-bottom: 5%; 添加到 #body #welcome。
关于 #1 - 请解释一下，因为我不清楚你想要得到什么(示意图截图就可以)。
关于html - CSS |正文不适合页眉，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37843447/