如何解决在css中对齐图像旁边的文本
this is who it supposed to look
这里是 HTML
<section class="right">
<h2>Watch your Head </h2>
<p>Ultimate Frisbee is a sport that I never played myself,but it's popularity is something hard to ignore
in many Midwestern college towns. Students (and people who wish they were still students) spend the few
briefs months of good weather,sprinting down fields,hurling frisbees,and yelling "Stack!!".</p>
<p>What I find much more entertaining is the large number of people who continue to play when the weather
gets windy and the night sky darkens around oh....4:15pm. The sight of frisbees boomeranging in the wind
is topped only by the kNowledge that even when you can't seem,those same plastic discs of death are
probably hurtling through the dark night sky at 8 or 9 o'clock in the evening.
</p>
<p>Ultimate Frisbee requires a great deal of stamina and dexterity. Not surprisingly,the <abbr
title="International Olympic Committee">IOC</abbr> officially recognized Ultimate as a sport in
2015. It can go up against other sports for inclusion in Olympic games.</p>
</section>
已修复不允许文本保持原样。请告诉我我做错了什么?
.right {
position: fixed;
top: 30%;
left: 30%;
transform: translate(-50%,-50%);
width: 200px;
height: 50px;
padding: 20px;
font-size: 16px;
text-align: inherit;
}
解决方法
#left {background:black;
width:30%;
float:left;}
#right {width:70%;
float:left;}
#content {width:80%;
padding-left:10px;
line-height: 30px;}
.img {background:white;
width:150px;
height:150px;
display:block;
margin: 10px auto;}
<div id="left">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div>
<div id="right">
<div id="content">
<h2>Watch your Head </h2>
<p>Ultimate Frisbee is a sport that I never played myself,but it's popularity is something hard to ignore
in many Midwestern college towns. Students (and people who wish they were still students) spend the few
briefs months of good weather,sprinting down fields,hurling frisbees,and yelling "Stack!!".</p>
</div>
</div>
如果你想在每个 img 上放置文字 喜欢
(img A) (A 说明文字),
(img B) (B 说明文字) 然后使用表
.img {width:150px;
height:150px;
background:white;
display:block;
margin:10px auto;}
.imgbox { background:black;
width:30%;}
.text {padding-left:10px;}
<table cellpadding="0" cellspacing="0">
<tr>
<td class="imgbox"><div class="img"><div></td>
<td>
<div class="text">
<h2>Watch your Head </h2>
<p>Ultimate Frisbee is a sport that I never played myself,and yelling "Stack!!".</p>
</div>
</td>
</tr>
<td class="imgbox"><div class="img"></div></td>
<td>
<div class="text">
<h2>Watch your Head </h2>
<p>Ultimate Frisbee is a sport that I never played myself,and yelling "Stack!!".</p>
</div>
</td>
</tr>
<table>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。