时间戳

首页 > 解决方案 > CSS对齐图像旁边的div

html - CSS对齐图像旁边的div

问题描述

我想在我的网站上嵌入一张图片，并在图片的右侧给出一个简短的描述。但是，当我调整浏览器大小时，描述要么与文本重叠（绝对位置），要么图像大小变得不可用（相对定位）。

PS：我已经尝试过min-width使用百分比、em、px、相对和绝对定位。

.img {
    height: 200px;
    padding-left: 9%;
    padding-top: 1%;
    width: 154px;
}

.desc {
    position: absolute;
    right: 50%;
    text-align: right;
    top: 28.5%;
}
<img class="img" src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="image" />
<div class="desc">
<p>
    <h2>description</h2>
    random description<br> of an image<br> as an example
</p>
</div>

Codepen 链接： https ://codepen.io/c-ca11Ahan69/pen/QWKKxZd

纯 CSS 中的解决方案值得赞赏

标签： htmlcss

解决方案

我已经看到了您的代码并将Flex添加到其中。您必须阅读文档才能更好地理解它。

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <style>
      .img{
          width: 154px;
           height: 200px;
         padding-top: 1%;
          padding-left: 9%;
  } 
      .desc{
     margin-left: 10px;
 }

 .flex{
   display: flex;
 }
    </style>
    <div class="flex">
  <img class="img" 
 src="http://placekitten.com/200/300" alt="image">
 <div class="desc">
  <p><h2>description</h2>
  random description <br>
  of an image<br>
  as an example</p>
  </div>
</div>
  </body>
</html>

推荐阅读