Wie positioniere ich ein Div am rechten Ende des Containers ohne absolute Position und float?

Question

Gibt es irgendwelche Möglichkeiten, ein Div auf der rechten Seite des Containers ohne Verwendung von absoluter Position und Float zu positionieren? Immer, wenn ich die float:right oder position: absolute verwende, weiß der Container nichts über die Höhe des floated oder positionierten Elements, was zu Layoutproblemen führt.

Ich habe versucht, feste Höhe auf das schwebende oder positionierte Element zu setzen und dann Padding-Boden zur Höhe des schwebenden oder positionierten Elements hinzuzufügen.

.container{ 
    padding-bottom: 20px; 
} 

.container .float_right{ 
    float: right; 
    height: 20px; 
} 

Obwohl es in Ordnung ist, aber ich suche nach einer besseren Lösung als diese. Kann mir hier jemand sagen, ob es eine andere Lösung für das Problem gibt?

Answer 1

klar und setzen Stile ein div mit der Klasse hinzufügen

Nur hinzufügen overflow: hidden; zum .container, read more here

.container{ 
    padding-bottom: 20px; 
    overflow: hidden; 
} 

.container .float_right{ 
    float: right; 
    height: 20px; /* no longer necessary */ 
} 

Ich habe dich padding-top und height Arten um sind gehalten, um die Wirkung von overflow: hidden; zu sehen. Es ist keine feste Höhe erforderlich.

codepen

Answer 2

gesetzt .container Arten text-align:right Mutter

.container{ 
     padding-bottom: 20px; 
     text-align:right; 
     width:100% 
    } 

und

.container .float_right{ 
     //float: right; 
     height: 20px; 
     display:inline-block; 
    } 

.container{ 
 
    padding-bottom: 20px; 
 
    text-align:right; 
 
    width:100% 
 
} 
 

 
.container .float_right{ 
 
    height: 20px; 
 
    display:inline-block; 
 
}

<div class="container"> 
 
    <div class="float_right"> 
 
    Right align div 
 
    </div> 
 
</div>

oder durch übergeordnete display:flex seting und margin-left: auto; Kind div

.container{ 
 
    padding-bottom: 20px; 
 
    width:100%; 
 
    display:flex; 
 
} 
 

 
.container .float_right{ 
 
    height: 20px; 
 
    margin-left: auto; 
 
}

<div class="container"> 
 
     <div class="float_right"> 
 
     Right align div 
 
     </div> 
 
    </div>

oder die Höhe des Behälters befestigen Sie

.clear{ 
     clear:both; 
    } 

.container{ 
 
    padding-bottom: 20px; 
 
    background:red; 
 
    width:100% 
 
} 
 

 
.container .float_right{ 
 
    float: right; 
 
    height: 40px; 
 

 
} 
 
.clear{ 
 
    clear:both; 
 
}

<div class="container"> 
 
    <div class="float_right"> 
 
    float right 
 
    </div> 
 
    <div class="clear"></div> 
 
</div>

Answer 3

Sogar obwohl ich die Antwort, die ich die folgende Lösung ein bisschen besser ist als alle anderen Lösungen denken akzeptiert, weil es Sie nicht benötigen padding-bottom auf dem Behälter oder die Höhe des Floats verwenden .

.container:after{ 
     content: ""; 
     display: table; 
     clear: both; 
} 

Wenden Sie den obigen Code auf das Containerelement an; Das wird das Problem lösen.

Credithttps://css-tricks.com/