Kann nicht bekommen Fotos nebeneinander in div

Hier ist mein Code auszurichten: http://pastebin.com/pDkM4FQi Kann nicht bekommen Fotos nebeneinander in div

#img1, 
 
#img2, 
 
#img3, 
 
#img4 { 
 
    display: inline-block; 
 
    height: 100%; 
 
} 
 
#navBar { 
 
    background-color: white; 
 
    border: 1px solid white; 
 
    border-radius: 15px; 
 
    display: inline-block; 
 
    height: 100px; 
 
    margin: auto; 
 
    margin-top: 50px; 
 
    width: 1200px; 
 
} 
 
#navSplitter { 
 
    background-color: gray; 
 
    display: inline-block; 
 
    height: 80px; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
    width: 3px; 
 
}

<div id="navBar"> 
 
    <div id="navSplitter" style="background-color: black;" /> 
 
    <img id="img1" src="img1.png" /> 
 
    <div id="navSplitter" /> 
 
    <img id="img2" src="img2.png" /> 
 
    <div id="navSplitter" /> 
 
    <img id="img3" src="img3.png" /> 
 
    <div id="navSplitter" /> 
 
    <img id="img4" src="img4.png" /> 
 
</div>

ich die Bilder div aufreihen im navBar bekommen nicht. Ich habe alles ausprobiert, was ich über Code weiß, und sogar ein paar Sachen nachgeschlagen, aber ich habe nie gefunden, was ich brauche, um diese Bilder mit den Splittern zwischen den einzelnen Bildern zu erstellen.

Quelle

2016-06-19 PiGuy Harris

Wie wäre es, alle Bilder in nur einem <div> zu setzen und dann ein left-padding und right-padding zu den Bildern hinzuzufügen? Auf diese Weise müssen Sie sich nicht so sehr mit der Ausrichtung der Bilder auseinandersetzen.

Bitte beachten Sie, dass ID-Tags eindeutig sind. Sie verwenden sie nicht überall in der HTML-Datei. Verwenden Sie Klasse, wenn Sie benötigen

Quelle

2016-06-19 04:35:29

Vielleicht würden Sie eher so etwas wie this.

<div id="nav-bar"> 
    <img src="http://dummyimage.com/80&text=1" alt=""> 
    <img src="http://dummyimage.com/80&text=2" alt=""> 
    <img src="http://dummyimage.com/80&text=3" alt=""> 
    <img src="http://dummyimage.com/80&text=4" alt=""> 
</div>

Kümmere dich nicht um mehr Tags für img Elemente schließen. Stellen Sie jedoch sicher, dass Sie im Attribut alt etwas beschreibend darüber schreiben, was der Bildinhalt für Menschen mit Behinderungen ist.

html { 
    font-size: 16px; 
}

Ich verwende rem s, um die meisten Messungen durchzuführen. rem s basieren auf einer Basisschriftgröße. Also neigen wir dazu, es im html Element zu setzen. Ich denke, 16px ist heutzutage ein guter Standard. 1rem ist daher 16px.

Mit Messungen wie dieser können Sie die Dinge relativ arrangieren. Sie könnten auch mit em s austauschen, wenn Sie wollten. Sie basieren auf der Schriftgröße des übergeordneten Elements.

#nav-bar { 
    max-width: 1200px; 
    width: 100%; 
    margin: 2rem auto; 
    text-align: center; 
    background-color: white; 
    border-radius: 1rem; 
    display: inline-block; 
    padding: .5rem; 
} 
#nav-bar img { 
    display: inline-block; 
} 
#nav-bar img:not(:last-child) { 
    margin-right: 1rem; 
    padding-right: 1rem; 
    border-right: 3px solid gray; 
}

Anstatt ein HTML-Element für die Ästhetik zu verwenden, können wir das vollständig in das CSS schieben.

Ich verwende einen rechten Rahmen für diese Navigationsbilder und verwende die not pseudo-class kombiniert mit last-child als :not(:last-child), die alle Bilder mit Ausnahme der letzten auswählt. Sie sehen also am Ende nicht die richtige Grenze.

Quelle

2016-06-19 04:35:15 Jonathan

Versuchen Sie folgendes: - entfernen margin-left: 20px von #naviSplitter

<head> 
    <style> 
     #img1, #img2, #img3, #img4 { 
      display: inline-block; 
      height: 100%; 
     } 

     #navBar { 
      background-color: white; 
      border: 1px solid white; 
      border-radius: 15px; 
      display: inline-block; 
      height: 100px; 
      margin: auto; 
      margin-top: 50px; 
      width: 1200px; 
     } 

     #navSplitter { 
      background-color: gray; 
      display: inline-block; 
      height: 80px; 
      /*margin-left: 20px;*/ 
      margin-right: 20px; 
      width: 3px; 
     } 
    </style> 
</head> 
<body> 
    <div id="navBar"> 
     <div id="navSplitter" style="background-color: black;"/> 
     <img id="img1" src="img1.png"/> 
     <div id="navSplitter"/> 
     <img id="img2" src="img2.png"/> 
     <div id="navSplitter"/> 
     <img id="img3" src="img3.png"/> 
     <div id="navSplitter"/> 
     <img id="img4" src="img4.png"/> 

    </div> 
</body>

Quelle

2016-06-19 04:35:37 Kamamba

div s sind keine selbstschließenden Tag, die Sie tun, damit ungültige HTML und Folglich funktionieren die Bilder nicht wie erwartet.

Also rate ich Ihnen zu vergessen, div für die Aufteilung der Bilder zu verwenden und nur eine HTML-Liste verwenden und dann ein Pseudo-Element ::before stattdessen verwenden.

Und auszurichten, müssen Sie vertical-align:top weil inline-block ist baseline standardmäßig

#navBar { 
 
    background-color: white; 
 
    border: 1px solid white; 
 
    border-radius: 15px; 
 
    display: inline-block; 
 
    height: 100px; 
 
    margin: auto; 
 
    margin-top: 50px; 
 
    width: 1200px; 
 
} 
 
ul { 
 
    font-size: 0 
 
} 
 
li { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    height: 100%; 
 
    margin: 0 5px 
 
} 
 
li::before { 
 
    background-color: gray; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    height: 100px; 
 
    left: -5px; 
 
    width: 3px; 
 
    content: ""; 
 
    position: relative 
 
}

<div id="navBar"> 
 
    <ul> 
 
    <li> 
 
     <img id="img1" src="//dummyimage.com/100x100" /> 
 
    </li> 
 
    <li> 
 
     <img id="img2" src="//dummyimage.com/100x100" /> 
 
    </li> 
 
    <li> 
 
     <img id="img3" src="//dummyimage.com/100x100" /> 
 
    </li> 
 
    <li> 
 
     <img id="img4" src="//dummyimage.com/100x100" /> 
 
    </li> 
 
    </ul> 
 
</div>

Quelle

2016-06-19 04:43:27 dippas

Ihre HTML nicht gültig ist. div Tags können auf diese Weise nicht geschlossen werden.

<div />.

div-Tags werden auf diese Weise ordnungsgemäß verwendet wurden.

<div></div>

Aufgrund fehlender schließender Tags sind Ihre Bilder und Splitter verschachtelt. Dies passiert, weil Ihr Browser nicht weiß, wie Sie Ihre Seite anzeigen können, da die geöffneten/geschlossenen Tags nicht übereinstimmen. Es versucht dann, Ihren Code zu reparieren, indem Sie eine Reihe von schließenden Tags am unteren Rand des Codes hinzufügen, ein schließendes Tag für jedes geöffnete, das nicht geschlossen wurde.

einfach Ihre div-Tags zu schließen, werden Ihre Bilder richtig auszurichten. Ihr CSS ist gültig.

Quelle

2016-06-19 04:49:37 DSofa

Das Problem ist in Ihrem HTML. Es gibt kein Konzept der selbstschließenden div Tags in HTML 4.x.

Änderung dieses <div id="navSplitter"/> zu <div id="navSplitter"></div>.

oder mein Vorschlag ist, <span></span> Tag zu verwenden, um Splite hinzuzufügen, weil span standardmäßig inline-block Element ist.

Hoffnung würde dies Ihr Problem helfen.

Quelle

2016-06-19 04:50:41 Rish

Niemand spricht über FLEXBOX. Kümmern Sie sich immer noch um den alten IE?

#navBar { 
 
    background-color: white; 
 
    border: 1px solid white; 
 
    border-radius: 15px; 
 
    width: 1200px; 
 
display: flex; 
 
justify-content: center; 
 
align-items: center; 
 
} 
 
img { width: 100px; height: 100px; background: red; } 
 
hr { 
 
    border: none; 
 
    background-color: gray; 
 
    height: 80px; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
    width: 3px; 
 
}

<div id="navBar"> 
 
    <img id="img1" src="img1.png" /> 
 
    <hr> 
 
    <img id="img2" src="img2.png" /> 
 
    <hr> 
 
    <img id="img3" src="img3.png" /> 
 
    <hr> 
 
    <img id="img4" src="img4.png" /> 
 
</div>

Quelle

2016-06-19 05:08:22

Leider Kunden. Und viele von ihnen verwenden, dh – Jonathan

geben Sie einfach zu IMG und HR 'display: inline-block'. Und zum '#navBar {display: block; Rand: o automatisch; } ' –

ich vollständig die navSplitter Elemente zu entfernen würde empfehlen, da sie einen zusätzlichen Satz von Elementen (unnötig) hinzufügen, die die Bilder in einer Reihe aufstellen, um sicherzustellen, werden müssen gestylt. Stattdessen können Sie nur einzeln padding/Grenzen zu den Bildern hinzufügen, die sie nach Wunsch getrennt werden. Beachten Sie Folgendes:

.image { 
 
    display: inline-block; 
 
    height: 100%; 
 
    padding: 20px; 
 
    border-right: 3px solid gray; 
 
} 
 

 
.image:last-of-type { 
 
    border-right: none; 
 
} 
 
#navBar { 
 
    background-color: white; 
 
    border: 1px solid white; 
 
    border-radius: 15px; 
 
    display: inline-block; 
 
    height: 100px; 
 
    margin: auto; 
 
    margin-top: 50px; 
 
    width: 1200px; 
 
}

<div id="navBar"> 
 
    <img class="image" src="http://placehold.it/150x150" /> 
 
    <img class="image" src="http://placehold.it/150x150" /> 
 
    <img class="image" src="http://placehold.it/150x150" /> 
 
    <img class="image" src="http://placehold.it/150x150" /> 
 
</div>

Quelle

2016-06-19 05:12:01

Kann nicht bekommen Fotos nebeneinander in div

Antwort

Verwandte Themen