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;
}

Fiddle

Vollbild-Fiddle

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.

Ich würde wirklich gerne helfen, aber die Antwort ist nicht sehr klar für mich. Wollen Sie aus der wrapper-Klasse, wo der Kopf ist oder wo die Klasse content ist, oder beide? Vielleicht können Sie beschreiben, das endgültige Aussehen, die Sie versuchen, zu erreichen, würde mein Verständnis des Problems besser.
Bitte siehe mein edit, ich hoffe das macht es klarer.

InformationsquelleAutor Sven | 2013-02-07

Schreibe einen Kommentar