webentwicklung-frage-antwort-db.com.de

CSS-Float: Ein Bild links vom Text verschieben

Für jedes Postfach möchte ich, dass die Miniaturansicht nach links und der Text nach rechts verschoben wird. Ich möchte nicht, dass der Daumen den Text umgibt.

Hier ist mein HTML-Code:

<div class="post-container">                
   <div class="post-thumb"><img src="thumb.jpg" /></div>
   <div class="post-title">Post title</div>
   <div class="post-content"><p>post description description description etc etc etc</p></div>
</div>

Ich habe ein paar Möglichkeiten ausprobiert und kann es immer noch nicht schaffen ... der Text wird nicht rechts angezeigt ...

Hier ist mein CSS-Code:

.post-container{
    margin: 20px 20px 0 0;  
    border:5px solid #333;
}

.post-thumb img {
    float: left;
    clear:left;
}

.post-content {
    float:right;
}
htmlcsscss-float
33
Cris

Ist es das, was Sie suchen?

  • Ich habe Ihren Titel in ein h3 (header) -Tag geändert, da dies eine semantischere Wahl ist als die Verwendung einer div.

Live Demo # 1
Live Demo # 2(mit Header oben, nicht sicher, ob Sie das wollten)

HTML:

<div class="post-container">                
    <div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff" /></div>
    <div class="post-content">
        <h3 class="post-title">Post title</h3>
        <p>post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc </p>
   </div>
</div>

CSS:

.post-container {
    margin: 20px 20px 0 0;  
    border: 5px solid #333;
    overflow: auto
}
.post-thumb {
    float: left
}
.post-thumb img {
    display: block
}
.post-content {
    margin-left: 210px
}
.post-title {
    font-weight: bold;
    font-size: 200%
}
79
thirtydot

Sie müssen nur beide Elemente nach links bewegen:

.post-container{
    margin: 20px 20px 0 0;  
    border:5px solid #333;
}

.post-thumb img {
    float: left;
}

.post-content {
    float: left;
}

Edit: Eigentlich brauchst du nicht die Breite, schwebe einfach beide nach links

4
Demelziraptor

Ich verwende fast immer nur Überlauf: In meinen Situationen verbirgt sich mein Textelement oft wie ein Zauber;)

.post-container {
 margin: 20px 20px 0 0;
 border:5px solid #333;
}
.post-thumb img {
 float: left;
}
.post-content {
 overflow:hidden;
}
1
Optimator

Schauen Sie sich dieses Beispiel an: http://jsfiddle.net/Epgvc/1/

Ich habe einfach den Titel nach links geschoben und unten einen clear:both div hinzugefügt.

1
Dutchie432

.post-container{
    margin: 20px 20px 0 0;  
    border:5px solid #333;
    width:600px;
    overflow:hidden;
}

.post-thumb img {
    float: left;
    clear:left;
    width:50px;
    height:50px;
    border:1px solid red;
}

.post-title {
     float:left;   
    margin-left:10px;
}

.post-content {
    float:right;
}
<div class="post-container">                
   <div class="post-thumb"><img src="thumb.jpg" /></div>
   <div class="post-title">Post title</div>
   <div class="post-content"><p>post description description description etc etc etc</p></div>
</div>

jsFiddle

1
dmackerman

Legen Sie die Breite von Post-Content und Post-Thumb fest, sodass Sie ein zweispaltiges Layout erhalten.

0
quarkdown27

Lösung mit display: flex (mit ansprechendem Verhalten): http://jsfiddle.net/ dkulahin/w3472kct

HTML: 

<div class="content">
    <img src="myimage.jpg" alt="" />
    <div class="details">
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>

CSS: 

.content{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.content img {
    width: 150px;
}
.details {
    width: calc(100% - 150px);
}
@media only screen and (max-width: 480px) {
    .content {
        flex-direction: column;
    }
    .details {
        width: 100%;
    }
}
0
Dmitry Kulahin