Die Anwendung der wrapper-Klasse, die direkt auf Elemente statt des umgebenden div?
Erste, das ist mein HTML
<div class="header">
<div class="wrapper">
<div class="navi">
<a href="#" class="logo">Logo</a>
<ul><!--
--><li><a href="#" class="navlink">Link 1</a></li><!--
--><li><a href="#" class="navlink">Link 2</a></li><!--
--></ul>
</div>
</div>
</div>
<div class="wrapper">
<div class="content">
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
und CSS
.wrapper {
width: 90%;
max-width: 50em;
margin: 0 auto;
}
.header,
.navi {
width: 100%;
}
.header {
background: grey;
}
.navi {
background: green;
display: table;
text-align: center;
}
.navi ul {
display: table-cell;
vertical-align: middle;
text-align: right;
}
.navi li {
background: orange;
display: inline;
margin-left: 10px;
}
.navilink {
display: inline-block;
width: auto;
}
.logo {
background: red;
float: left;
}
.content {
width: 100%;
background: fuchsia;
}
Sehen Sie, der wrapper sorgt dafür, dass es immer eine Lücke zwischen Inhalt und Rand der Ansicht und über einen bestimmten Punkt hinaus (50 em), die .wrapper
nicht überschreitet.
Den code, den ich gepostet hier funktioniert, aber ich würde gerne wissen, ob es irgendeine chance, um loszuwerden <div class="wrapper">
Erreichung des gleichen Ergebnis. Ich habe bereits versucht, gelten die .wrapper
Klasse direkt auf die Elemente, aber das funktioniert nicht - warum?
Zu klären: Mein Ziel ist es, die markup-cleaner. Das ist, warum ich bin daran interessiert, eine Lösung, die dann dafür sorgt, dass die Elemente Verhalten sich wie in dem Beispiel, das ich gepostet, aber ohne den Einsatz von <div class="wrapper">
. Die Klasse .wrapper
hat zu bleiben, natürlich, es ist nur so, dass div
scheint mir, dass. Deshalb habe ich versucht, hinzuzufügen .wrapper
direkt zu den Elementen.
Bitte siehe mein edit, ich hoffe das macht es klarer.
InformationsquelleAutor Sven | 2013-02-07
Du musst angemeldet sein, um einen Kommentar abzugeben.
Entfernen Sie den wrapper-div, und fügen Sie die beiden CSS-Eigenschaften des content-div..
InformationsquelleAutor George Katsanos