Wie habe ich meine Bilder nebeneinander ohne „Float“ zu verwenden?

ich auf meiner eigenen Webseite arbeiten und auf dem Abschnitt der Seite meiner Fähigkeiten es sollte mich zwei Programme an Seite, aber mein Problem ist, dass dies Ich habe nicht funktioniert und keine Ahnung, warum dies nicht funktioniert.Wie habe ich meine Bilder nebeneinander ohne „Float“ zu verwenden?

Ich habe versucht bereits Float zu verwenden, aber ich dies versäumt, so vielleicht annother Option dort zu verwenden ist.

.Skills { 
 
    width: auto; 
 
    background-color: #262626; 
 
} 
 
.Meine { 
 
    padding-top: 54px; 
 
    padding-left: 50px; 
 
    font-size: 30px; 
 
    font-weight: 900; 
 
    letter-spacing: 15px; 
 
    color: #fff; 
 
} 
 
.skills { 
 
    padding-top: 4px; 
 
    padding-left: 50px; 
 
    font-size: 30px; 
 
    font-weight: 900; 
 
    letter-spacing: 15px; 
 
    color: #fff; 
 
} 
 
.UnterschriftNo3 { 
 
    padding-top: 7px; 
 
    padding-left: 50px; 
 
    font-size: 13px; 
 
    font-weight: 400; 
 
    color: #fff; 
 
} 
 
.TrennungNo3 { 
 
    padding-top: 7px; 
 
    padding-left: 50px; 
 
} 
 
.Photoshop > div > img { 
 
    margin-top: 36px; 
 
    padding-left: 49px; 
 
} 
 
.Illustrator > div > img { 
 
    margin-top: 36px; 
 
    padding-left: 49px; 
 
} 
 
.InDesign > div > img { 
 
    margin-top: 36px; 
 
    padding-left: 49px; 
 
} 
 
.Dreamweaver > div > img { 
 
    margin-top: 36px; 
 
    padding-left: 49px; 
 
} 
 
.AfterEffects > div > img { 
 
    margin-top: 36px; 
 
    padding-left: 49px; 
 
} 
 
.PremierePro > div > img { 
 
    margin-top: 36px; 
 
    padding-left: 49px; 
 
} 
 
.SonyVegas > div > img { 
 
    margin-top: 36px; 
 
    padding-left: 49px; 
 
} 
 
.Cinema4D > div > img { 
 
    margin-top: 36px; 
 
    padding-left: 49px; 
 
    margin-bottom: 30px; 
 
}

<div class="Skills"> 
 

 
    <div class="Meine"> 
 
    <div>MEINE</div> 
 
    </div> 
 
    <!--Meine--> 
 

 
    <div class="skills"> 
 
    <div>SKILLS</div> 
 
    </div> 
 
    <!--skills--> 
 

 
    <div class="UnterschriftNo3"> 
 
    <div>DAS IST MEIN KÖNNEN</div> 
 
    </div> 
 
    <!--UnterschriftNo3--> 
 

 
    <div class="TrennungNo3"> 
 
    <img src="Images/Strich_320.jpg" alt="" /> 
 
    </div> 
 
    <!--TrennungNo3--> 
 

 
    <div class="Programme"> 
 
    <div class="Photoshop"> 
 
     <div> 
 
     <img src="Images/Photoshop.png" alt="" /> 
 
     </div> 
 
    </div> 
 

 
    <p> 
 
     <div class="Illustrator"> 
 
     <div> 
 
      <img src="Images/Illustrator.png" alt="" /> 
 
     </div> 
 
     </div> 
 
    </p> 
 

 
    <div class="InDesign"> 
 
     <div> 
 
     <img src="Images/InDesign.png" alt="" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="Dreamweaver"> 
 
     <div> 
 
     <img src="Images/Dreamweaver.png" alt="" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="AfterEffects"> 
 
     <div> 
 
     <img src="Images/AfterEffects.png" alt="" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="PremierePro"> 
 
     <div> 
 
     <img src="Images/PremierePro.png" alt="" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="SonyVegas"> 
 
     <div> 
 
     <img src="Images/SonyVegas.png" alt="" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="Cinema4D"> 
 
     <div> 
 
     <img src="Images/Cinema4D.png" alt="" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 
</div> 
 
<!--Skills-->

Quelle

2016-08-05 Constantin Finkbeiner

Wo ist der Schwimmer in Ihrem CSS? – shole

I tryed Schwimmer auf der „Programm“ Klasse, aber das ist für mich nicht funktioniert und ich habe versucht alles, was ich weiß, –

Nehmen 'Anzeige: flex' zu' .Skills' Container. Wenn das für Sie funktioniert, hier ein paar mehr Details: http://stackoverflow.com/a/32122011/3597276 –

diese erhalten Hinzufügen sollte man gehen. Redigieren Sie einfach den .Programme> div Sie wünscht: p

.Programme{ 
    display:flex; 
    flex-direciton:row; 
    flex-wrap:wrap 
} 

.Programme>div{ 
    width:40%; 
    margin:0 auto; 
}

Quelle

2016-08-05 01:37:16

Das ist es;) Danke –

Sie sollten in der Lage sein, alle zu löschen Die div-Tags um Ihre Programme, die Ihren Programmnamen anzeigen. Seitdem werden sie nicht mehr benötigt. –

Wenn Sie mehr Hilfe benötigen, können Sie mich immer auf meinem Skype live kontaktieren: verschaesesiebe –

Setzen Sie einfach width :50% auf Ihre innere Inhalt Programmesdiv und setzen width:100% zu Programmes div

.Photoshop, .Illustrator { 
    width: 50% 
} 
.Programme { 
    width: 100% 
}

Quelle

2016-08-05 01:20:15

Danke, aber meine Icons werden gerade viel größer als zuvor –

Lassen Sie uns diese ein wenig aufzuräumen und GIV Sie einen Schwimmer Option. Sie haben eine Liste von Programmen, also verwenden Sie eine Liste. Dann werden wir das duplizierte CSS reduzieren.

.Skills { 
 
    width: auto; 
 
    background-color: #262626; 
 
} 
 
.Meine { 
 
    padding-top: 54px; 
 
    padding-left: 50px; 
 
    font-size: 30px; 
 
    font-weight: 900; 
 
    letter-spacing: 15px; 
 
    color: #fff; 
 
} 
 
.skills { 
 
    padding-top: 4px; 
 
    padding-left: 50px; 
 
    font-size: 30px; 
 
    font-weight: 900; 
 
    letter-spacing: 15px; 
 
    color: #fff; 
 
} 
 
.UnterschriftNo3 { 
 
    padding-top: 7px; 
 
    padding-left: 50px; 
 
    font-size: 13px; 
 
    font-weight: 400; 
 
    color: #fff; 
 
} 
 
.TrennungNo3 { 
 
    padding-top: 7px; 
 
    padding-left: 50px; 
 
} 
 

 
.Programme 
 
{ 
 
    list-style-type:none; 
 
    padding-left:0; 
 
} 
 

 
.Programme > li { 
 
    float:left; 
 
    width:50%; 
 
} 
 

 
/*Set Base settings for images */ 
 
.Programme img 
 
{ 
 
    margin-top: 36px; 
 
    padding-left: 49px; 
 
} 
 

 
//Cinema 4d seems to be special so lets add what is needed 
 
.Cinema4D img { 
 
    margin-bottom: 30px; 
 
} 
 

 
.clearfix:after { 
 
    content:""; 
 
    display:block; 
 
    clear:both; 
 
}

<div class="Skills"> 
 

 
    <div class="Meine"> 
 
    <div>MEINE</div> 
 
    </div> 
 
    <!--Meine--> 
 

 
    <div class="skills"> 
 
    <div>SKILLS</div> 
 
    </div> 
 
    <!--skills--> 
 

 
    <div class="UnterschriftNo3"> 
 
    <div>DAS IST MEIN KÖNNEN</div> 
 
    </div> 
 
    <!--UnterschriftNo3--> 
 

 
    <div class="TrennungNo3"> 
 
    <img src="Images/Strich_320.jpg" alt="" /> 
 
    </div> 
 
    <!--TrennungNo3--> 
 
    
 
    <ul class="Programme clearfix">  
 
    <li class="Photoshop"> 
 
     <img src="Images/Photoshop.png" alt="" />  
 
    </li> 
 
    <li class="Illustrator"> 
 
     <img src="Images/Illustrator.png" alt="" />   
 
    </li> 
 
    <li class="InDesign">  
 
     <img src="Images/InDesign.png" alt="" />  
 
    </li> 
 
    <li class="Dreamweaver">  
 
     <img src="Images/Dreamweaver.png" alt="" />  
 
    </li> 
 
    <li class="AfterEffects">  
 
     <img src="Images/AfterEffects.png" alt="" />  
 
    </li> 
 
    <li class="PremierePro">  
 
     <img src="Images/PremierePro.png" alt="" /> 
 
    </li> 
 
    <li class="SonyVegas"> 
 
     
 
     <img src="Images/SonyVegas.png" alt="" /> 
 
     
 
    </li> 
 

 
    <li class="Cinema4D"> 
 
     
 
     <img src="Images/Cinema4D.png" alt="" /> 
 
     
 
    </li> 
 
    </ul> 
 

 

 
</div> 
 
<!--Skills-->

Siehe http://cssmojo.com/the-very-latest-clearfix-reloaded/ warum ich clearfix verwendet haben und was Sie vielleicht in Abhängigkeit von den Browsern ändern müssen Sie Targeting.

Quelle

2016-08-05 02:20:48

Wie habe ich meine Bilder nebeneinander ohne „Float“ zu verwenden?

Antwort

Verwandte Themen