在图像旁边对齐文本时遇到问题答案

【问题标题】：Having issues aligning text next to an image在图像旁边对齐文本时遇到问题
【发布时间】：2020-07-27 06:31:47
【问题描述】：

我第一次发帖，正在寻求帮助。我目前正在进行评估，最后一部分被难住了。我正在制作一张图片卡片，上面有一张图片，旁边有一个圆形图片，以及圆形图片旁边和下面的一些文字这就是它的样子：https://i.gyazo.com/547948a01bd8f045e6a1b90bd79e113a.png

这就是它的外观：

https://i.gyazo.com/9426e3f060cdd540581f12da474fc8ca.png

    <!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>App Academy HTML/CSS Assessment</title>
  <link href="site.css" rel="stylesheet">
</head>

<body>

<div class="card">
  <img src="./images/desert.jpg" alt="desert" class="desert__img">
  <img src="./images/person-avatar.jpg" alt="avatar" class="avatar__img">
  <div class="title__text">
    <h4>Title goes here</h4>
  </div>
  <div class="secondary__text">
    <p>Secondary text</p>
  </div>
  <div class="body__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.

  </div>
</div>
</body>
</html>

   @media screen and (min-width: 600px) {
    form {
        display: grid;
        position: relative;
        width: 600px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 599px) {
    form {
        display: inline;
        position: relative;
        width: 100%;
    }

}


/*Style for picture card*/


.card {
   /* text-align: center; */
    width: 344px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
}

.desert__img {
    width: 344px;
    height: 194px;
    object-fit: cover;
}

.avatar__img {
    display: flex;
    border-radius: 50%;
    width: 40px;
    justify-self: start;
    padding: 10px;
}

.body__text {
    padding: 16px;
}

div h4 {
    display: flex;
    justify-content: center;
    align-items: top;
}


div p {
    display: flex;
    justify-content: center;
}

h4 {
    margin: 0;
    padding: 0;
}

p {
    display: flex;
    margin: 0 auto 20px auto;
    padding: 0;
    justify-self: center;
}

任何帮助都会很棒！谢谢！

【问题讨论】：

标签： html css flexbox css-grid

【解决方案1】：

查看下面的代码：

<!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>App Academy HTML/CSS Assessment</title>
        <link href="site.css" rel="stylesheet">
    </head>

    <body>
        <div class="card">
            <img src="./images/desert.jpg" alt="desert" class="desert__img"> 
            <div class="container1">
                <img src="./images/person-avatar.jpg" alt="avatar" class="avatar__img">
                <div class="container2">
                    <div><h4>Title goes here</h4></div>
                    <div><p>Secondary text</p></div>
                </div>
            </div>
            <div class="body__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.
            </div>  
        </div>
    </body>
</html>

这里我们使用了 2 个容器，一个用于行元素，一个用于列元素。您可以使用 HTML 表格轻松、更有效地实现这一目标。接下来是css：

@media screen and (max-width: 599px) {
    form {
        display: inline;
        position: relative;
        width: 100%;
    }

}


/*Style for picture card*/


.card {
   /* text-align: center; */
   border-radius: 25px;
    width: 344px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
}

.desert__img {
    width: 344px;
    height: 194px;
    object-fit: cover;
    border-top-left-radius: 25px;
border-top-right-radius: 25px;
}

.avatar__img {
    display: flex;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    justify-self: start;
    padding: 10px;
}

.body__text {
    padding: 16px;
}

.container1{
    height: 40px;
    display: flex;
    flex-flow: row nowrap;
}

.container2{
    display: flex;
    flex-flow: column nowrap;
}

/* ************These styles are junk************ */
/* *********Better to use classes n ids********* */
div h4 {
    display: flex;
    justify-content: center;
    align-items: top;
}


div p {
    display: flex;
    justify-content: center;
}


h4 {
    margin: 0;
    padding: 0;
}

p {
    display: flex;
    margin: 0 auto 20px auto;
    padding: 0;
    justify-self: center;
}
/* ************These styles are junk************ */

在这里，我在卡片中添加了border-radius 属性以使其角变圆。将border-top-left-radius、border-top-right-radius 与图像一起使用，使其顶部边框变圆，使卡片看起来整洁。为图像提供高度 n 宽度很重要，因此我将 height 属性添加到头像图片。最后，使用flex-flow 属性将两个容器类设置为分别包含不换行的行和列。希望它会帮助你。和平。

【讨论】：

这帮了很多忙。对此仍然很陌生，因此尽可能尝试学习使用 flex 和 CSS 网格的最佳方法。谢谢！~

【解决方案2】：

为 .avatar_img 类添加一个浮点属性

.avatar_img {
float: left;
}

【讨论】：

【解决方案3】：

将title__text 和secondary__text 包裹在div 内，

然后将avatar__img 和title 包裹在flexbox div 中。

  <div class="card-info">
    <img src="./images/person-avatar.jpg" alt="avatar" class="avatar__img">
    <div class="card-info-title">
      <div class="title__text">
        <h4>Title goes here</h4>
      </div>
      <div class="secondary__text">
        <p>Secondary text</p>
      </div>
    </div>
  </div>

.card-info {
  display: flex;
  align-items: center;
}
.secondary__text > p {
  margin-bottom: 0;
}

这是 CodePen 链接https://codepen.io/azhkuro/pen/WNrXxpd。希望对你有帮助

【讨论】：