CSS-Pseudoelement zwischen Elementen

Ist es möglich mit CSS-Pseudoelement :after oder :before Floats zwischen Elementen zu löschen? Oder gibt es eine andere Möglichkeit, die Schwimmer zwischen <div class="float"> und <section class="inner"> zu löschen?CSS-Pseudoelement zwischen Elementen

HTML und CSS sieht so aus:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
*, *:before, *:after { 
 
    box-sizing: border-box; 
 
} 
 
section.wrap { 
 
    width: 100%; 
 
} 
 
section.wrap:after { 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
} 
 

 
div { 
 
    width: 33.33%; 
 
    height: 40px; 
 
    background-color: powderblue; 
 
    float: left; 
 
    border-top: solid 0px white; 
 
    border-right: solid 5px white; 
 
    border-bottom: solid 5px white; 
 
    border-left: solid 0px white; 
 
} 
 

 
div:nth-of-type(3n + 3) { 
 
    border-right: 0; 
 
}

<section class="wrap"> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 

 
    <!-- CLEAR FLOAT HERE --> 
 

 
    <section class="inner"> 
 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    </section> 
 
</section>

Quelle

2016-12-13 caramba

hinzufügen 'klar: left' zu' .inner' Klasse. –

@Mr_Green! das ist es! Willst du es als Antwort bitte posten, damit ich deine annehmen kann – caramba

caramba, es ist dein Wunsch. Aber ich werde es nicht als Antwort posten :) –

Sicher mit clear: both oder clear: left:

.inner { 
    clear: both; 
}

Quelle

2016-12-13 08:40:16

Sie löschen können section's:before

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
*, *:before, *:after { 
 
box-sizing: border-box; 
 
} 
 
section.wrap { 
 
    width: 100%; 
 
} 
 
section.wrap:after { 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
} 
 
div { 
 
    width: 33.33%; 
 
    height: 40px; 
 
    background-color: powderblue; 
 
    float: left; 
 
    border-top: solid 0px white; 
 
    border-right: solid 5px white; 
 
    border-bottom: solid 5px white; 
 
    border-left: solid 0px white; 
 
} 
 

 
div:nth-of-type(3n + 3) { 
 
border-right: 0; 
 
} 
 
.inner:before { 
 
content: ''; 
 
display: block; 
 
clear: both; 
 
}

<section class="wrap"> 
 
<div class="float"></div> 
 
<div class="float"></div> 
 
<div class="float"></div> 
 
<div class="float"></div> 
 
<div class="float"></div> 
 
<div class="float"></div> 
 
<div class="float"></div> 
 
<div class="float"></div> 
 
<div class="float"></div> 
 
<div class="float"></div> 
 

 
<!-- CLEAR FLOAT HERE --> 
 

 
<section class="inner"> 
 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
</section> 
 
</section>

Quelle

2016-12-13 08:39:59

Sie können klar sagen: sowohl vor inneren Abschnitt, wie folgt aus:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
*, *:before, *:after { 
 
    box-sizing: border-box; 
 
} 
 
section.wrap { 
 
    width: 100%; 
 
} 
 
section.inner:before { 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
} 
 

 
div { 
 
    width: 33.33%; 
 
    height: 40px; 
 
    background-color: powderblue; 
 
    float: left; 
 
    border-top: solid 0px white; 
 
    border-right: solid 5px white; 
 
    border-bottom: solid 5px white; 
 
    border-left: solid 0px white; 
 
} 
 

 
div:nth-of-type(3n + 3) { 
 
    border-right: 0; 
 
}

<section class="wrap"> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 

 
    <!-- CLEAR FLOAT HERE --> 
 

 
    <section class="inner"> 
 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    </section> 
 
</section>

Quelle

2016-12-13 08:46:11

Neben der ursprünglichen Frage, es möglich ist, zu platzieren das ::before/::after Pseudoelement zwischen untergeordneten Elementen mit Flexbox-Layout und order Eigenschaft. Z.B .:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
*, *:before, *:after { 
 
    box-sizing: border-box; 
 
} 
 
section.wrap { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 
section.wrap:after { 
 
    content: 'I am an inserted pseudo!'; 
 
    display: block; 
 
    order: 1; 
 
    width: 100%; 
 
    background: yellow; 
 
} 
 

 
div { 
 
    width: 33.33%; 
 
    height: 40px; 
 
    background-color: powderblue; 
 
    border-top: solid 0px white; 
 
    border-right: solid 5px white; 
 
    border-bottom: solid 5px white; 
 
    border-left: solid 0px white; 
 
} 
 

 
div:nth-of-type(3n + 3) { 
 
    border-right: 0; 
 
} 
 

 
.inner { 
 
    width: 100%; 
 
    order: 2; 
 
}

<section class="wrap"> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 
    <div class="float"></div> 
 

 
    <!-- NO NEED TO CLEAR FLOATS, BUT WE CAN PUT A PSEUDO HERE --> 
 

 
    <section class="inner"> 
 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    </section> 
 
</section>

Quelle

2016-12-13 08:54:26

CSS-Pseudoelement zwischen Elementen

Antwort

Verwandte Themen