Erstellen eines Kreises, warum überlappen Divs?

Hallo Ich versuche einen Kreis mit vier Vierteln zu bauen, aber meine Divs scheinen sich aus irgendeinem Grund zu überlappen.Erstellen eines Kreises, warum überlappen Divs?

Wie kann ich es so machen, dass die untere Hälfte des Kreises nicht die obere überlappt?

Dank jede Hilfe dankbar

body { 
 
    margin: 150px; 
 
} 
 

 
#topleft { 
 
    height: 0px; 
 
    width: 0px; 
 
    border: 90px solid red; 
 
    border-top-left-radius: 180px; 
 
} 
 

 
#topright { 
 
    height: 0px; 
 
    width: 0px; 
 
    border: 90px solid blue; 
 
    border-top-right-radius: 180px; 
 
} 
 
#bottomleft { 
 
    height: 0px; 
 
    width: 0px; 
 
    border: 90px solid green; 
 
    border-bottom-left-radius: 180px; 
 
} 
 

 
#bottomright { 
 
    height: 0px; 
 
    width: 0px; 
 
    border: 90px solid yellow; 
 
    border-bottom-right-radius: 180px; 
 
}

<div> 
 
    <span id="topleft"></span> 
 
    <span id="topright"></span> 
 
</div> 
 
<div> 
 
    <span id="bottomleft"></span> 
 
    <span id="bottomright"></span> 
 
</div>

Quelle

2016-05-22 Kane

Verwenden Sie diesen Code

<style> 
     body { 
      margin: 150px; 
     } 

     .semi-circle-1 { 
      display: flex; 
     } 

     .semi-circle-2 { 
      display: flex; 
     } 

     #topleft { 
      height: 0px; 
      width: 0px; 
      border: 90px solid red; 
      border-top-left-radius: 180px; 
     } 

     #topright { 
      height: 0px; 
      width: 0px; 
      border: 90px solid blue; 
      border-top-right-radius: 180px; 
     } 

     #bottomleft { 
      height: 0px; 
      width: 0px; 
      border: 90px solid green; 
      border-bottom-left-radius: 180px; 
     } 

     #bottomright { 
      height: 0px; 
      width: 0px; 
      border: 90px solid yellow; 
      border-bottom-right-radius: 180px; 
     } 

    </style> 

</head> 

<body> 

    <div class="semi-circle-1"> 
     <div id="topleft"></div> 
     <div id="topright"></div> 
    </div> 
    <div class="semi-circle-2"> 
     <div id="bottomleft"></div> 
     <div id="bottomright"></div> 
    </div>

Quelle

2016-05-22 04:11:54

wie funktioniert 'Anzeige: flex;' dieses Problem beheben? setzt es das div auf 'display: block;'? – Kane

nein, es macht sie mehr wie ein Inline-Block arbeiten und die Standardausrichtung ist Zeile, so dass alle Elemente in einer Zeile ausgerichtet sind und keine Margen angegeben wurden, klebt sie, so dass wir zwei Zeilen in Zeile ausgerichteten Divs haben –

Es ist beweisbar Breite und Höhe Problem. Wenn Sie Breite und Höhe 90px geben, kann es gelöst werden. Verwenden Sie auch Hintergrundfarbe statt Rahmenfarbe.

#topleft { 
 
    height: 90px; 
 
    width: 90px; 
 
    display: inline-block; 
 
    background-color: red; 
 
    border-top-left-radius: 180px; 
 
} 
 

 
#topright { 
 
    height: 90px; 
 
    width: 90px; 
 
    display: inline-block; 
 
    background-color: blue; 
 
    border-top-right-radius: 180px; 
 
} 
 
#bottomleft { 
 
    height: 90px; 
 
    width: 90px; 
 
    display: inline-block; 
 
    background-color: green; 
 
    border-bottom-left-radius: 180px; 
 
} 
 

 
#bottomright { 
 
    height: 90px; 
 
    width: 90px; 
 
    display: inline-block; 
 
    background-color: yellow; 
 
    border-bottom-right-radius: 180px; 
 
}

<div> 
 
    <span id="topleft"></span> 
 
    <span id="topright"></span> 
 
</div> 
 
<div> 
 
    <span id="bottomleft"></span> 
 
    <span id="bottomright"></span> 
 
</div>

Quelle

2016-05-22 04:12:58

Das Problem ist, dass Ihr div keine Höhe hat - es im wesentlichen Null ist, so dass die Spanne Elemente überlappende enden. Da div ein Blockelement ist, passt sich die Breite automatisch an den Inhalt an, nicht aber an die Höhe. Lösung ist eingestellt Höhe:

div { 
    height: 180px; 
}

Hier ist eine Geige: https://jsfiddle.net/vn9163tp/

Quelle

2016-05-22 04:20:06 rby

Erstellen eines Kreises, warum überlappen Divs?

Antwort

Verwandte Themen