Float right funktioniert nicht richtig in CSS

Question

Ich habe ein Beispiel für Float direkt in CSS erstellt. Ich habe jedoch ein Problem mit der Reihenfolge und dem Abstand zwischen den Elementen. Dies ist das Ergebnis:

Die graue Punkte sollte man rechte Seite und auch auf die grünen Punkte sein.

Irgendwelche Gedanken? Danke,

Das ist mein Codebeispiel: https://jsfiddle.net/dalenguyen/mfj78LL5/

.green-dot { 
 
    color: #20b08f; 
 
} 
 
.gray-dot { 
 
    color: grey; 
 
} 
 
.professional-skills .green-dot, 
 
.professional-skills .gray-dot { 
 
    float: right; 
 
    font-size: 1.5rem; 
 
}

<div class="professional-skills"> 
 
    <h2>Professional Skills</h2> 
 
    <p>Web Design <span class="green-dot">&#x25cf; &#x25cf; &#x25cf; &#x25cf; &#x25cf;</span></p> 
 
    <p>Design <span class="green-dot">&#x25cf; &#x25cf; &#x25cf;</span><span class="gray-dot">&#x25cf; &#x25cf;</span></p> 
 
</div> 
 
</div>

Answer 1

Die CSS-Eigenschaft float nie für Gebäudepläne Versuchen entworfen wurde.

Es wurde entwickelt, um Text um Bilder zu wickeln.

Da CSS kein besseres Layoutsystem bietet, wurden Floats (und Tabellen, Inline-Block und absolute Positionierung) als Hack-Workarounds verwendet.

Aber jetzt, dass CSS3 flex und grid Module haben wide browser support, und sie sind speziell für Gebäude-Layouts konzipiert, sollten Sie sie verwenden.

section { 
 
    display: flex; 
 
} 
 

 
section > * { 
 
    margin: 0; 
 
    align-self: center; /* 1 */ 
 
} 
 

 
section > p { 
 
    margin-right: auto; /* 2 */ 
 
} 
 

 
.green-dot { 
 
    color: #20b08f; 
 
    font-size: 1.5rem; 
 
} 
 

 
.gray-dot { 
 
    color: grey; 
 
    font-size: 1.5rem; 
 
}

<article class="professional-skills"> 
 

 
    <h2>Professional Skills</h2> 
 

 
    <section> 
 
    <p>Web Design</p> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    </section> 
 

 
    <section> 
 
    <p>Design</p> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="gray-dot">&#x25cf;</span> 
 
    <span class="gray-dot">&#x25cf;</span> 
 
    </section> 
 

 
</article>

Hinweise:

1. Erfahren Sie mehr über die align-self Eigenschaft hier:

   • How does flex-wrap work with align-self, align-items and align-content?

2. Erfahren Sie mehr über auto Margen hier:

   • In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Answer 2

können Sie aktualisieren die folgenden:

.professional-skills .green-dot, .professional-skills .gray-dot 
{ 
    float: right; 
    font-size: 1.5rem; 
    padding-right:5px; 
} 

und es wird funktionieren, aber es ist besser, jeden Kreis zu halten in einem separaten DIV.

Answer 3

Bei der Verwendung von float:right; ist das Element, das am weitesten entfernt ist, immer das, das zuvor im HTML-Code vorhanden war. Wenn Sie möchten, dass Ihre grauen Punkte zu Ihren grünen Punkten passen, müssen Sie sie zuerst in Ihren HTML-Code einfügen.

Auch, wie bereits erwähnt, werden Sie wahrscheinlich Ihre Punkte in separate Container aufteilen, so dass Sie eine vollständige Kontrolle über den Abstand haben (anstatt Leerzeichen zwischen Ihren Punkten zu verwenden). Siehe Mhd.Jarkas Antwort.

Hoffe es hilft!

Answer 4

diese

.green-dot,.green-dot-1 { 
 
    color: #20b08f; 
 
} 
 
.gray-dot,.gray-dot-1 { 
 
    color: grey; 
 
} 
 

 
.professional-skills .green-dot, .professional-skills .gray-dot{ 
 
    float: right; 
 
    font-size: 1.5rem; 
 
} 
 
#dots{ 
 
font-size: 1.5rem; 
 
float : right; 
 
} 
 
#abc{ 
 
float: left; 
 
} 
 
#clear { 
 
clear: both; 
 
} 
 
.green-dot-1{ 
 
padding-right: 5px; 
 
}

<div class="professional-skills"> 
 
    <h2>Professional Skills</h2> 
 
    <p>Web Design <span class="green-dot">&#x25cf; &#x25cf; &#x25cf; &#x25cf; &#x25cf;</span></p> 
 
    <p id="abc">Design </p> 
 
<div id="dots"> 
 
    <span class="green-dot-1">&#x25cf; &#x25cf; &#x25cf;</span><span class="gray-dot-1">&#x25cf; &#x25cf;</span> 
 
    </div> 
 
    <div id="clear"></div> 
 
</div> 
 
</div>

Answer 5

Der ungleichmäßige Abstand von float: right;, in Ihrem Beispiel verursacht wird, gibt es zwei Spannweiten in der zweiten Reihe zu vergleichen, um nur 1 Spanne in der ersten Zeile und Floating entfernt das Rendering von Leerraum zwischen den Tags.

Sie können jeden einzelnen Punkt in einen Bereich einschließen, der das Abstandsproblem beheben und die umgekehrte Reihenfolge berücksichtigen, die durch das Floaten verursacht wird.

.green-dot { 
 
    color: #20b08f; 
 
} 
 

 
.gray-dot { 
 
    color: gray; 
 
} 
 

 
.professional-skills .green-dot, 
 
.professional-skills .gray-dot { 
 
    float: right; 
 
    font-size: 1.5rem; 
 
    margin-left: 5px; 
 
    margin-top: -5px; 
 
}

<div class="professional-skills"> 
 
    <h2>Professional Skills</h2> 
 
    <p> 
 
    Web Design 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    </p> 
 
    <p> 
 
    Design 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="green-dot">&#x25cf;</span> 
 
    <span class="gray-dot">&#x25cf;</span> 
 
    <span class="gray-dot">&#x25cf;</span> 
 
    </p> 
 
</div>