Bild in Zeile mit Text HTML CSS

Entschuldigung noch neu zu allem. Ich erstelle eine Webseite und habe ein Bild und einen Text nebeneinander in zwei separaten Divs. Ich habe es geschafft, sie auf der Seite an die gewünschte Stelle zu bringen, aber wenn ich die Größe der Seite ändere, ändert sich der Text, das Bild jedoch nicht. Ich möchte, dass der untere Teil des Textes immer mit dem unteren Rand des Bildes übereinstimmt.Bild in Zeile mit Text HTML CSS

Jede Hilfe wird geschätzt! Hier ist der Code:

<head> 

    <title>Stefano Mocini</title> 
    <link href='http://fonts.googleapis.com/css?family=Milonga' rel='stylesheet' type='text/css'> 
    <link href='styles/style.css' rel='stylesheet' type='text/css'> 
</head> 

<body> 

    <div id="title"> 
     Stefano Mocini 
    </div> 

    <div id="decal"> 
     <div id="image"> 
      <img src="images/tree.png" alt="tree" width="600" height="900"> 
     </div>  
    </div> 

    <div id="about"> 
     <p>THANK YOU SO MUCH FOR YOUR REVIEWS; YOUR DONATION AND FOR SHARING MY MUSIC!!!</p> 

     <p>About me: I started made music when I was only 6, because in the computer there was installed fruity loops, and I used it like a game. but i soon started to try to reproduce what i listened in the radio, so, step by step, i started to learn how to use this softwer. After i started to play the keyboard, that I received like christmast gift. One day I listened to "Back to life" from Allevi, and I loved it so much that I started to play the piano, every day. Step by step i learned how to make music, and how music is made . So now i can use the softwer whereby I played whan i was a child to make my own music. What kind of music should I make? Simply the one that I like!</p> 

     <p>You can use my music for making non-commercial videos or projects, but please put the title of the song and the author in the description otf the video or in the credits of the video.</p> 

     <p>Commercial use of my music: by the PRO license, or contact me</p> 
    </div> 

</body>

body { 
font-family: 'Milonga', cursive; 
} 

#title { 
font-size:72pt; 
text-align:center; 
} 


#decal { 
float:left; 
width:50%; 
float:left; 
height:80%; 
} 

#image { 
margin-top:60%; 
} 

#about { 
font-size:24pt; 
float:left; 
width:50%; 
padding-top:5%; 
height:80%; 
}

Quelle

2013-06-06 k.s

Können Sie eine Online-Demo zur Verfügung stellen oder erstellen Sie auf [JSFIDDLE] – farjam

@farjam er bereits gebucht seinen Code , machen Sie die Geige selbst –

bitte img-Tag width = 100% machen die div passt Abziehbild sogar auf Resize und fügen Pixel Höhe

<div id="decal"> 
    <div id="image"> 
     <img src="images/tree.png" alt="tree" width="100%" height="900px"> 
    </div>  
</div>

Quelle

2013-06-06 04:51:26

Hier ist der JS Geige Link http://jsfiddle.net/XV3JM/ –

user2458195 ist richtig. Aber fügen Sie dem CSS eine Breite hinzu, anstatt das Attribut width zu verwenden.

Check this

Full Screen

CSS

* { 
    font-family:'Milonga', cursive; 
} 
#title { 
    font-size:72pt; 
    text-align:center; 
} 
#decal { 
    width:45%; /* changed to get some space btween #decal and #about */ 
    float:left; 
    height:80%; 
} 
#image { 
    margin-top:60%; 
} 

img { 
    width: 100% /* 100% of its parent ie, #decal*/ 
} 

#about { 
    font-size:24pt; 
    float:right; /* right to get some space */ 
    width:50%; /* try changing back to left n see what happens */ 
    padding-top:5%; 
    height:80%; 
}

Quelle

2013-06-06 05:05:17 Sourabh

Danke, das hat das Bild aufhören zu überschneiden mit dem Text, der ist genial, aber das Bild nicht immer inline bleiben mit Wenn ich die Größe des Browserfensters am unteren Rand des Textes ändere, kann ich das irgendwie machen? Ich frage mich, ob es etwas mit dem Padding-Top zu tun hat, da das Bild ein% ist? –

@Sourabh ist in der Nähe. Aber Sie würden besser display:inline-block anstelle von float verwenden und vertical-align:bottom verwenden, um die Böden auszurichten.

CSS

* { 
    font-family:'Milonga', cursive; 
} 
#title { 
    font-size:72pt; 
    text-align:center; 
} 
#decal { 
    font-size:24pt; /*Add this so that 1em is the same accross the divs*/ 
    padding-bottom:1em; /*Match the paragraph margin*/ 
    width:45%; 
    display:inline-block; 
    height:80%; 
    vertical-align:bottom; 
} 
#image { 
    margin-top:60%; 
} 

img { 
    width: 100% 
} 

#about { 
    font-size:24pt; 
    display:inline-block; 
    width:50%; 
    padding-top:5%; 
    height:80%; 
    vertical-align:bottom; 
}

Beispiel: (? Http://jsfiddle.net/) http://jsfiddle.net/ajdQa/

Quelle

2013-06-06 06:13:08

Schön! 'Inline-Block' kam mir nicht in den Sinn. '+ 1' :) – Sourabh

@Sourabh' Inline-Block' ist jetzt mein Go-to jetzt statt Floats. Wenn nichts anderes, dann bedeutet das keine Klarstellungen –

Bild in Zeile mit Text HTML CSS

Antwort

Verwandte Themen