Verschiedene Position des div ist mit Text und divs enthält Bilder

https://stackoverflow.com/questions/4185121

10-10-2019
|

Frage

ich habe ein Problem mit der Skizzierung einiger div Elemente.

Ich habe die folgende Struktur auf.

<div id="skillcontent">
  <div id="skillname" class="inline">
   <div class="skilllist">
    <div><h3>[SKILL]</h3></div>
    <div><h3>[SKILL]</h3></div>
   </div>
  </div>

  <div id="skillstars" class="inline">
   <div class="skilllist">
    <div>
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
    </div>
    <div>
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
    </div>
   </div>
  </div>

  <div id="skillinfo" class="inline">
   <div class="skilllist">
    <div><h4>[YEARS],[LEVEL]</h4></div>
    <div><h4>[YEARS],[LEVEL]</h4></div>
   </div>
  </div>
 </div>

Css:

.skilllist div {
    padding: 0px;
    margin: 0px;
    display: block;
    height: 25px; /*same height as star images*/
}

div.inline {
    display: inline-block;
}

h3 {
    font-size: 18px;
    color: #5b5b5b;
    margin: 0px;
}

h4 {
    font-size: 18px;
    color: #808080;
    margin: 0px;
}

img {
    vertical-align: bottom;
}

Die divs, die den Text (h3 und h4) Elemente enthalten, sind etwas kleiner als die divs, die Bilder enthalten. Es gibt keinen Rand oder Polsterung auf jedem Element. Die Höhe aller die divs ist die gleiche, aber es gibt noch einige Leerzeichen am Anfang der divs mit der Klasse skilllist, den Text enthält. Es gibt keine Leerzeichen über dem div, die Bilder enthält. Warum ist das und wie kann ich das Problem beheben?

Beispiel: Klicken

Lösung

versuchen, Ihre CSS auf alle Artikel Hinzufügen vertical-align:top; versetzt. funktioniert, wenn ich auf der Testseite dies mit Firebug hat.

Andere Tipps

Mehrere Dinge:

Sie scheinen HTML-Elemente zu mißbrauchen. h3, h4, etc. sind für Schlagzeilen
Auf der anderen Seite, verwenden Sie zu viele divs. Betrachten Sie die vielen anderen HTML-Elemente, die vorhanden ist. Zum Beispiel, schreien die Elemente, die Sie "skillist" Anruflisten (ol, ul) sein.
Wenn Sie sich über kleine Pixelspalte so besorgt sind, HTML / CSS kann das falsche Werkzeug für Sie sein. Das gesamte Konzept von HTML / CSS ist für unterschiedliche Darstellungen auf unterschiedliche Systemen flexibel und erlaubt zu sein und nicht ein Pixel perfektes Design-Tool zu sein.
Ihr Problem sein kann, weil durch Standardbilder Inline-Elemente sind, die für die Unterlängen auf der Schriftgrundlinie und lassen Raum sitzen. Versuchen Sie, vertical-align: bottom auf die Bilder.

Ohne Ihre CSS zu sehen, es ist schwer zu sagen.

Sie müssen bedenken, dass jedes Element Standardstil hat durch den Standard / Browser zur Verfügung gestellt. Um Trumpf dies, müssen Sie explizit auf Ihre eigenen Werte definieren.

Zum Beispiel definieren die meisten Browser eine Standardfarbe Seite Hintergrund sein: #FFFFFF

Um es zu ändern, müssen Sie Ihren eigenen Wert liefern.

Hope, das hilft.

Es könnte an den Rand unten sein, dass Browser auf h-Tags (sowie p und einige anderen Tags) automatisch hinzufügen.

Es kann helfen, einen CSS-Reset-Stylesheet verwenden viele der Standardränder und Polsterung zu entfernen, die verschiedenen Browser anders machen. Es gibt einen unter http://developer.yahoo.com/yui/3/cssreset/

Ich bin mit tobiasmay - es würde helfen, wenn wir eine Demo-Seite oder so ähnlich haben

können Sie einige CSS oder Set post up a jsfiddle.net bitte? es ist schwer, etwas, die Sie reparieren Ihre divities zu helfen ..

// EDIT

hier gehen Sie, ich festen Markup komplett:

<div id="skills">
<div class="skillA">
  <h3 class="skill">Skill A</h3>
        <ul class="skillRow">
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
    </ul>
  <p class="foo">Years, Level</p>
</div>
<div class="skillB">
  <h3 class="skill">Skill B</h3>
        <ul class="skillRow">
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
    </ul>
  <p class="foo">Years, Level</p>
</div>
</div>

und das CSS mit einem Arbeits ul li

#skills{
background-color:lightgreen;
overflow:auto;
}
.skillA, .skillB{
overflow:auto;
margin-bottom:10px;
}
ul.skillRow{
display: inline;
}
ul.skillRow li{
list-style-type: none;
float:left;
}
p.foo{
float:left;
font-size:18px;
padding:6px;
}
h3.skill{
float:left;
display:inline;
padding:6px;
}

hier ist die Geige Link: http://jsfiddle.net/tobiasmay/gKrkS/

Fügen Sie vertical-align: top oder vertical-align: bottom (je nachdem, was Sie bevorzugen ) an die div.inline Regel. Das macht es in allen Browsern funktioniert.

Der Grund für die div mit den Bildern ein wenig höher als die andere positioniert ist, ist auf der Weg-inline-Blöcke in ihrer enthält Linienfeld ausgerichtet sind:

(...) [B] oxes horizontal angeordnet werden, eine nach der anderen, an der Oberseite eines umschließenden Blocks beginnen. Horizontale Ränder, Rahmen und Polsterung sind zwischen diesen Boxen respektieren. (...) Die rechteckige Fläche, die die Boxen enthält, die eine Linie bilden, ist eine Zeilen-Box genannt .

(...)

Eine Linie Box ist immer groß genug für alle Felder enthält. Es kann jedoch höher sein als die höchste Box enthält (wenn zum Beispiel Box sind so ausgerichtet, dass Basislinien in einer Reihe aufstellen). Wenn die Höhe einer Box B kleiner ist als die Höhe der Linie Box es, die vertikale Ausrichtung von B innerhalb des Zeilenfeld enthält, wird durch die

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow