无法实现3-3图片居右显示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    img{
      float:right;
    }
    p{
      text-align: center;
      line-height:135%;
      letter-spacing: 3px;
    }
    </style>
</head>
<body>
    <div>
  <img src="1.jpg">
    <p>CSS为字体、文本提供了大量的样式属性，可以使我们的页面式更加丰富的多彩。CSS为字体、文本提供了大量的样式属性，可以使我们的页面式更加丰富的多彩。CSS为字体、文本提供了大量的样式属性，可以使我们的页面式更加丰富的多彩。CSS为字体、文本提供了大量的样式属性，可以使我们的页面式更加丰富的多彩。</p>
    </div>
</body>
</html>

夕阳天使0 2017-05-31

源自：CSS文本样式 3-4 编程练习

收起

3回答

相识相知0 回答被采纳获得+3积分 2017-05-31 16:26:23

我只知道两点，1：你的图片没有用<div>包裹，至于为什么要用<div>包着我也不是很明白；2：你想要图片居右，用已学的文本对齐方式text-align就可以了，没必要用float(未学，不明白作用)。

收起回答

夕阳天使0 提问者 #1

非常感谢！

2017-05-31 20:23:15
鹿屿 #2

因为img是行内元素，不能直接用text-align进行对齐设置，所以应该用一个块元素来包裹img，然后再对div进行设置text-align，而不是对img设置对齐。

2017-11-09 16:05:09

相识相知0 2017-05-31 16:30:11

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
     .one{text-align:right;}
     p{
      text-align: center;
      line-height:135%;
      letter-spacing: 3px;
     }
    </style>
</head>
<body>
    <div>
       <div class="one">
          <img src="1.jpg">
       </div>
     <p>CSS为字体、文本提供了大量的样式属性，可以使我们的页面式更加丰富的多彩。CSS为字体、文本提供了大量的样式属性，可以使我们的页面式更加丰富的多彩。CSS为字体、文本提供了大量的样式属性，可以使我们的页面式更加丰富的多彩。CSS为字体、文本提供了大量的样式属性，可以使我们的页面式更加丰富的多彩。</p>
    </div>
</body>
</html>

收起回答