问无法为具有图像和文本标记的<div>设置正确的边框
EN

Stack Overflow用户

提问于 2021-07-07 11:41:22

回答 1查看 17关注 0票数 0

我希望有一些文本和图像显示的方式，文本是在左边和后面的图像。就像在博客里。首先，我制作了一个标记，作为文本和图像的容器。然后我用标签输入文本和图像。我设置了图像浮点数的属性:右。现在我以我想要的方式在博客中得到了文本和图像，就像形式一样。但我也想在整个内容中添加边框。所以看起来文字和图像都在一个盒子里。但是边框不能覆盖图像的高度和宽度。

<html>

<head>
  <title>Float</title>
</head>
<style>
  img {
    float: right;
  }
</style>

<body>
  <div>
    <p><img src="https://s27363.pcdn.co/wp-content/uploads/2017/02/Tigers-Nest-Hike.jpg.optimal.jpg" alt="Tiger's Nest"
        style="width:200px; height:200px; margin-left:15px;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
      egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
      vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
      odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
      ullamcorper ipsum dignissim ac...
    </p>

  </div>
</body>

</html>

css

css-float

html

回答 1

Stack Overflow用户

发布于 2021-07-07 11:46:38

您需要将display: flex;添加到div：

<html>

<head>
  <title>Float</title>
</head>
<style>
div {
  display: flex;
  border: 5px solid blue;
}

  img {
    float: right;
  }
</style>

<body>
  <div>
    <p><img src="https://s27363.pcdn.co/wp-content/uploads/2017/02/Tigers-Nest-Hike.jpg.optimal.jpg" alt="Tiger's Nest"
        style="width:200px; height:200px; margin-left:15px;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
      egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
      vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
      odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
      ullamcorper ipsum dignissim ac...
    </p>

  </div>
</body>

</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68285337

复制

相似问题

问无法为具有图像和文本标记的<div>设置正确的边框
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法为具有图像和文本标记的<div>设置正确的边框EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法为具有图像和文本标记的<div>设置正确的边框
EN