Wie floats in einem DIV enthalten sind

Ich habe zwei Inline-Elemente in einem div. Ein Element schwebt nach links und das andere nach rechts. Ich habe die absolute Positionierung verwendet, um den Block mit Inline-Elementen am unteren Rand eines DIV zu platzieren.Wie floats in einem DIV enthalten sind

Problem: Das Element nach rechts skews aus seinem Behälter schwimmt. Wie kann ich das beheben, so dass es in seinem Container bleibt? Hier ist die CodePen.

HTML

<div class="posts__post"> 
    <article> 
     <a class="posts__post--preview" href=""><img src="http://lorempixel.com/470/310/food" /></a> 
     <a class="posts__post--title" href=""><h1>Bryce Canyon A Stunning U.S Travel Destination</h1></a> 
     <div class="posts__post--meta"> 
     <a class="posts__post__timestamp"><i class="fa fa-clock-o" aria-hidden="true"></i>10 days ago</a> 
     <a class="posts__post__tag">Motivation</a> <!-- element floating out ---> 
    </div> 
    </article> 
</div>

SCSS

.posts__post{ 
    height: 400px; 
    width: 310px; 
    margin: 40px auto; 
    //margin-bottom: 40px; 
    position: relative; 
    text-align: left; 
    background-color: white; 
    border-radius: 5px 5px 5px 5px; 
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15); 

    .posts__post--preview img{ 
     width: 100%; 
     height: auto; 
     border-radius: 5px 5px 0px 0px; 
    } 

    .posts__post--tag{ 
     font-size: em(15); 
     font-weight: bold; 
     color: $light-grey; 
    } 

    .posts__post--meta{ 
    color: $light-grey; 
    position: absolute; 
    bottom: 25px; 
    left: 0; 
    display: block; 
    } 

    .posts__post--title, .posts__post--tag, .posts__post--meta{ 
    margin: 0 25px; 
    display: inline-block; 
    text-docoration: none; 
    } 

.posts__post__timestamp{ 
    float:left; 
    } 

.posts__post__tag{ 
    float:right; 
} 
}

Quelle

2016-11-03 samsos

Dies wegen Marge ist, die Sie posts__post--meta gegeben haben, anstatt Marge Verwendung Polsterung der Verwendung und box-sizing:border-box

.posts__post--meta{ 
    padding: 0 25px; 
    display: inline-block; 
    text-docoration: none; 
    width: 100%; 
    box-sizing: border-box; 
}

Für weitere Informationen über box-sizing

Quelle

2016-11-03 07:34:17

Ihre Lösung und @ GVM Lösung funktioniert gut. In dieser Situation bin ich mir nicht sicher, wen ich aufwerten und als korrekt markieren sollte. Obwohl ich eine Frage habe. Warum haben Sie Box-Sizing hinzugefügt? – samsos

Die Eigenschaften width und height beinhalten den Inhalt, das Padding und den Rahmen, nicht aber den Rand. Dieser Link kann Ihnen helfen http://www.w3schools.com/cssref/css3_pr_box-sizing.asp –

.posts__post--meta{ 
    color: $light-grey; 
    position: absolute; 
    bottom: 25px; 
    left: 0; 
    right:0; //add this 
    display: block; 
    }

Quelle

2016-11-03 07:35:09 GvM

einfach eine Anmerkung hinzuzufügen ich bemerkt habe, während ich auf einer PHP-Anwendung arbeite. Die Verwendung von float in einem <div> überschreibt das ganze div. um meinen Standpunkt klarzustellen. Wenn Sie <div class="page-wrapper"> haben und darin haben Sie <div id="img-align"> und es hat einen Schwimmer, es überschreiben die "page-wrapper" und stand alone. benutze es nur, wenn du es wirklich brauchst. Danke

Quelle

2016-11-03 07:44:18 imohd23

Wie floats in einem DIV enthalten sind

Antwort

Verwandte Themen