gpt4 book ai didi

html - 图像与文本 HTML CSS 一致

转载 作者:太空狗 更新时间:2023-10-29 15:41:44 29 4
gpt4 key购买 nike

道歉对这一切来说还是新鲜事。我正在创建一个网页,并在两个单独的 div 中将图像和文本并排放置。我已经设法将它们放在页面上我想要的位置,但是当我调整页面大小时,文本会调整大小,但图像不会。我希望文本底部始终与图像底部对齐。

感谢任何帮助!这是代码:

<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%;
}

最佳答案

@Sourabh 很接近。但是你最好使用 display:inline-block 而不是 float 并使用 vertical-align:bottom 来对齐底部。

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;
}

示例:http://jsfiddle.net/ajdQa/

关于html - 图像与文本 HTML CSS 一致,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16953744/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com