图像与文本 HTML CSS
Posted
技术标签:
【中文标题】图像与文本 HTML CSS【英文标题】：Image In Line With Text HTML CSS 【发布时间】：2013-06-01 23:15:02 【问题描述】：道歉对这一切还是陌生的。我正在创建一个网页，并在两个单独的 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" >
</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%;
【问题讨论】：
你能提供一个在线演示或创建一个JSFIDDLE @farjam 他已经发布了他的代码，自己动手做吧 【参考方案1】：@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/
【讨论】：
@Sourabhinline-block 现在是我的首选，而不是浮动。如果没有别的，那就意味着没有清除修复【参考方案2】：
user2458195 是对的。但是为 CSS 添加宽度而不是使用 width 属性。
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%;
【讨论】：
谢谢，这使图像停止与文本重叠，这很棒，但是当我调整浏览器窗口大小时，图像并不总是与文本底部保持一致，有什么办法吗我能做到吗？我想知道这是否与图像的填充顶部有关 % ？【参考方案3】：请使 img 标记宽度=100%，即使在调整大小并将 px 添加到高度时也适合贴花 div
<div id="decal">
<div id="image">
<img src="images/tree.png" >
</div>
</div>
【讨论】：
以上是关于图像与文本 HTML CSS的主要内容，如果未能解决你的问题，请参考以下文章