Floating Bilder sind nicht auf der gleichen Höhe auf der relativen Position

Ich brauche eine Reihe von Icons unter einem div gruppiert, um auf der rechten Seite meines Logos zu erscheinen (die in der oberen linken Ecke befindet). Ich brauche das Logo und alle Symbole, um eine relative Position zu haben. Ich benutze float:left für beide divs, aber die zweite div (die Gruppe von Symbolen) erscheint unter dem Logo und nicht auf der rechten Seite. Ich habe auch versucht, sie unter einer ungeordneten Liste zu gruppieren und style="float:left" als HTML einzugeben, aber es funktioniert auch nicht.Floating Bilder sind nicht auf der gleichen Höhe auf der relativen Position

Hier ist die CSS ist:

div.container { 
width: 1111px; 
} 

#parent { 
display: flex; 
} 

.logo { 
float:left; 
position: relative; 
top:0px; 
margin-left: 0px; 
} 

#icons { 
position:relative; 
float: left;  
white-space: nowrap; 
width: 100%; 
display: table; 
max-width: 100%; 
} 

.all-icons { 
position: relative; 
float: left; 
vertical-align: middle; 
padding: 15px; 
display: table-cell; 
} 

.all-icons img { 
height:auto; 
width: auto; 
max-height: 77px; 
max-width: 100%; 
margin: 15px; 
}

Und der HTML:

<body> <div class="container"> 

<div id="parent"> 

<div class="logo"> <img src="../Header/Logo-vector.png" width="27%" height="27%"> </div> 

<div id="icons" style="float:left" class="all-icons"> 

<img src="../Header/icons/icon1.png" width="389" height="317"> 

<img src="../Header/icons/icon2.png" width="451" height="317"> 

<img src="../Header/icons/icon3.png" width="427" height="317"> 

<img src="../Header/icons/icon4.png" width="837" height="317"> 

<img src="../Header/icons/icon5.png" width="594" height="317"> 

</div> 

</div> 
</div> 

</body>

Quelle

2016-07-07 Renzo

Ist das entfernen, was Sie suchen?

div.container { 
 
    /* width: 1111px; */ 
 
} 
 
#parent { 
 
    display: flex; 
 
} 
 
.logo img { 
 
    margin: 15px; 
 
} 
 
.all-icons { 
 
    white-space: nowrap; 
 
} 
 
.all-icons img { 
 
    margin: 15px; 
 
}

<div class="container"> 
 

 
    <div id="parent"> 
 

 
    <div class="logo"> 
 
     <img src="http://placehold.it/77/f00" alt=""> 
 
    </div> 
 

 
    <div id="icons" class="all-icons"> 
 
     
 
     <img src="http://placehold.it/77" alt=""> 
 
     <img src="http://placehold.it/77" alt=""> 
 
     <img src="http://placehold.it/77" alt=""> 
 
     <img src="http://placehold.it/77" alt=""> 
 
     <img src="http://placehold.it/77" alt=""> 
 

 
    </div> 
 

 
    </div> 
 
</div>

Wenn Sie nicht flex verwenden können, versuchen display: table

div.container { 
 
    /* width: 1111px; */ 
 
} 
 
#parent { 
 
    display: table; 
 
} 
 
.logo { 
 
    display: table-cell; 
 
} 
 
.all-icons { 
 
    display: table-cell; 
 
} 
 
.logo img { 
 
    margin: 15px; 
 
} 
 
.all-icons { 
 
    white-space: nowrap; 
 
} 
 
.all-icons img { 
 
    margin: 15px; 
 
}

<div class="container"> 
 

 
    <div id="parent"> 
 

 
    <div class="logo"> 
 
     <img src="http://placehold.it/77/f00" alt=""> 
 
    </div> 
 

 
    <div id="icons" class="all-icons"> 
 
     
 
     <img src="http://placehold.it/77" alt=""> 
 
     <img src="http://placehold.it/77" alt=""> 
 
     <img src="http://placehold.it/77" alt=""> 
 
     <img src="http://placehold.it/77" alt=""> 
 
     <img src="http://placehold.it/77" alt=""> 
 

 
    </div> 
 

 
    </div> 
 
</div>

Quelle

2016-07-07 05:05:25 LGSon

Ich suche die grauen Kästchen direkt rechts von der roten Box. – Renzo

@Renzo Ohne den Leerraum zwischen? – LGSon

Nein, vorzugsweise immer noch gleiche Ränder zwischen allen Elementen. @LGSon – Renzo

hinzufügen #icons { text-align: right; }, ich denke, das wird Ihnen helfen.

bitte nicht #parent { display: flex;} entfernen und auch #icons { width: 100% }

Quelle

2016-07-07 04:57:17 vignesh

Es richtet die Symbole rechts auf der Seite, aber sie sind immer noch unter dem Logo und nicht direkt von ihrem platziert. – Renzo

Es entspricht mir sieht (Bild unten sehen) jedoch die Margen/padding macht es so, als ob es unten und rechts ist. CSS-Dateien zu halten, so klein wie möglich, nicht so umfassend wie möglich

display: inline-table
http://flexboxgrid.com/
Erinnern an:

Andere Dinge, die nützlich erweisen Code gesehen zu haben machen Sie es einfach, Dinge zu finden und zu reparieren

Quelle

2016-07-07 05:13:08 Metalshark

Ihr Bild der Logo-Klasse nicht in der Mitte des übergeordneten Elements. In

text-align: center; margin: auto;

in Sie Klasse .Logo

Quelle

2016-07-07 05:15:05 PJ1815

Floating Bilder sind nicht auf der gleichen Höhe auf der relativen Position

Antwort

Verwandte Themen