Wie richte ich 3 kreisförmige Bilder aus?

Question

So habe ich diesen Code:

/*--- Circular images --- */ 
 
.img-circular1, .img-circular2, .img-circular3{ 
 
width: 200px; 
 
height: 200px; 
 
background-size: cover; 
 
display: block; 
 
    border-radius: 100px; 
 
-webkit-border-radius: 100px; 
 
-moz-border-radius: 100px; 
 
float: left; 
 
background: red; 
 
} 
 
.img-circular1{ 
 
    background-image: url('/Images/learn.jpg'); 
 
} 
 
.img-circular2{ 
 
    background-image: url('/Images/watch.jpg'); 
 
} 
 
.img-circular3{ 
 
    background-image: url('/Images/practice.jpg'); 
 
} 
 
#container1 
 
{ 
 
top: 100px; 
 
    position: relative; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    width:70%; 
 
    background-color: green; 
 
    overflow: auto; 
 
    bottom: 0; 
 
}

<div id="container1" style="padding-bottom: 500px;"> 
 
<div class="img-circular1"></div> 
 
<div class="img-circular2"></div> 
 
<div class="img-circular3"></div> 
 
<div class="img-circular1"></div> 
 
</div>

Ich habe nicht geschafft, zwei von ihnen zu bekommen in einem grünen Feld zu zeigen. Aber die dritte (die ich vor und nach den anderen 2 dupliziert habe) wird aus irgendeinem Grund nicht angezeigt?

Sie sind auch nicht im gleichen Abstand voneinander - wie kann ich sie in gleichen Abständen voneinander bekommen?

Bitte helfen

HINWEIS: Anstelle von Bildern gibt es rote Kreise, nur für die Sichtbarkeit Gründen.

Answer 1

Bewerben float: left auf Bilder themself, nicht auf Behälter:

/*--- Circular images --- */ 
 
.img-circular1, .img-circular2, .img-circular3{ 
 
/*width: 200px;*/ 
 
/*height: 200px;*/ 
 
width: 100px; 
 
height: 100px; 
 
background-size: cover; 
 
display: block; 
 
    border-radius: 100px; 
 
-webkit-border-radius: 100px; 
 
-moz-border-radius: 100px; 
 
float: left; 
 
} 
 
.img-circular1{ 
 
    background-image: url('/Imageslearn.jpg'); 
 
    background: #aaa; /*added to as an alternative to image*/ 
 
} 
 
.img-circular2{ 
 
    background-image: url('/Images/watch.jpg'); 
 
    background: #aaa; /*added to as an alternative to image*/ 
 
} 
 
.img-circular3{ 
 
    background-image: url('/Images/practice.jpg'); 
 
     background: #aaa; /*added to as an alternative to image*/ 
 
} 
 
.container1{ 
 
\t left: 15%; 
 
\t width: 70%; 
 
/* \t float: left; */ 
 
\t height: 300px; 
 
\t position: relative; 
 
    }

<div class="container1"> 
 
<div class="img-circular1"></div> 
 
<div class="img-circular2"></div> 
 
<div class="img-circular3"></div> 
 
</div>

Um Ihre zweite Frage zu beantworten:

1. Wrap Kreise in einem anderen div
2. machen ihre Breite ist ein Prozentwert und schweben sie links
3. Ränder auf Kreise setzen auf margin: 0 auto.

Hier ist Prototyp für Sie zu studieren:

#green { 
 
    background: green; 
 
    padding: 10px; 
 
    overflow: auto; 
 
} 
 

 
#blue { 
 
    background: blue; 
 
    width: 50%; 
 
    float: left; 
 
    border: 1px solid #fff; 
 
    box-sizing: border-box; /*good for when there is border or padding*/ 
 
} 
 

 
#red { 
 
    background: red; 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
    margin: 0 auto; 
 
}

<div id="green"> 
 
    <div id="blue"> 
 
    <div id="red"></div> 
 
    </div> 
 
    <div id="blue"> 
 
    <div id="red"></div> 
 
    </div> 
 
    <div id="blue"> 
 
    <div id="red"></div> 
 
    </div> 
 
    <div id="blue"> 
 
    <div id="red"></div> 
 
    </div> 
 
</div>

Answer 2

ich Ihren Code aktualisiert FlexBox zu verwenden. Da Sie möchten, dass Ihre Kreise gleichmäßig über die Zeile verteilt sind, hilft float: left nicht viel. Ich musste ein Wrapper-Div um jedes Kreis-Div einfügen, so dass es sich ausdehnen konnte, um den Raum zu füllen, ohne die Kreise zu verzerren.

/*--- Circular images --- */ 
 

 
.img-circular1, 
 
.img-circular2, 
 
.img-circular3 { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-size: cover; 
 
    border-radius: 100px; 
 
    -webkit-border-radius: 100px; 
 
    -moz-border-radius: 100px; 
 
    background: red; 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 

 
.img-circular1 { 
 
    background-image: url('/Images/learn.jpg'); 
 
} 
 

 
.img-circular2 { 
 
    background-image: url('/Images/watch.jpg'); 
 
} 
 

 
.img-circular3 { 
 
    background-image: url('/Images/practice.jpg'); 
 
} 
 

 
#container1 { 
 
    top: 100px; 
 
    position: relative; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 70%; 
 
    background-color: green; 
 
    overflow: auto; 
 
    bottom: 0; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 

 
.wrap { 
 
    flex-grow: 1; 
 
}

<div id="container1" style="padding-bottom: 500px;"> 
 
    <div class="wrap"> 
 
    <div class="img-circular1"></div> 
 
    </div> 
 
    <div class="wrap"> 
 
    <div class="img-circular2"></div> 
 
    </div> 
 
    <div class="wrap"> 
 
    <div class="img-circular3"></div> 
 
    </div> 
 
    <div class="wrap"> 
 
    <div class="img-circular1"></div> 
 
    </div> 
 
</div>