我希望描述在图片旁边

Question

我真的是通过反复试验把它放在一起的，所以它可能全错了。由于弹出的建议，刚才我尝试将 float: right; 添加到 .detail_image_description。我希望描述运行与两张图片处于同一级别，以便描述两者。

编辑： 我想我纠正了我最初在 html 中的错误。我想在页面的左侧（我的左侧）有两个半大图像，在这些图像的右侧有一个文本块。我还想让这个页面在浏览器中保持静态 size/shape。如果 CSS 网格是一个选项；这是否需要对各种浏览器进行额外的修改？什么是公约？我想在这一点上我将忽略该网站的移动使用。

website mockup

body  {
     background-color: #ecf0f1;
     display: block;
     margin: 0;
}

/*page description*/
.detail_image   {
    background-color: #ecf0f1;   
}

/*heading*/
.detail_image_title   {
    padding: 20px;
    font-family: "BebasNeue-Regular";
    font-size:3rem;
    font-weight: 10;
    color: #c1cdcd;
    text-align: center;
}

/*first image*/
.detail_image_row   {
     display: flex;
}

/*second image*/
.detail_image_row2   {
     display: flex;
}

/*placing images on page*/
.detail_image_column   {
     flex: left;
     padding: 35px;
      
}
/*placing text alongside images*/    
.detail_image_description   {
    font-family: "ClementePDaa-Hairline";
    font-size:1.2rem; 
    color: #000000;
             
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>detail</title>
    <link rel="stylesheet" type="text/css"
    href="detail_image.css"/>
  </head>
        <body>
          <div class="detail_image">
            <div class="detail_image_title">detail</div>
               <div class="detail_image_row">
                  <div class="detail_image_column">
                     <img src="image.png" alt="photo">
                  </div>
               </div>
               <div class="detail_image_row2">
                  <div class="detail_image_column">
                     <img src="image.png" alt="photo">
                  </div>
               </div>
               <div class="detail_image_description">
                  <p>image description</p>
               </div>
          </div>
        </body>
</html>

Answer 1

（在 OP 的评论和我对他们的回答后完全编辑，以显示我在评论中的建议）

将 float: left 和 clear: left 应用于图像容器，使文本位于其右侧并在其下方继续。

这是您需要的基础知识，您可以从那里继续 fine-tune 设置。

body {
  background-color: #ecf0f1;
  display: block;
  margin: 0;
}

.detail_image_title {
  padding: 20px;
  font-family: "BebasNeue-Regular";
  font-size: 3rem;
  font-weight: 10;
  color: #c1cdcd;
  text-align: center;
}

.detail_image_column {
  padding: 35px;
}

.detail_image_description {
  font-family: "ClementePDaa-Hairline";
  font-size: 1.2rem;
  color: #000000;
}

.detail_image_column {
  float: left;
  clear: left;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>detail</title>
  <link rel="stylesheet" type="text/css" href="detail_image.css" />
</head>

<body>
  <div class="detail_image">
    <div class="detail_image_title">detail</div>
      <div class="detail_image_column">
        <img src="https://picsum.photos/seed/picsum/200/150" alt="photo">
      </div>
      <div class="detail_image_column">
        <img src="https://picsum.photos/seed/picsum/200/150" alt="photo">
      </div>
    <div class="detail_image_description">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
        quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>

      <p>Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
        nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>

      <p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut
        libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
        quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>

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

</html>

Answer 2

我认为像 ::before 和 ::after 这样的伪元素可以在另一个元素之前或之后显示一些东西，或者你可以使用像 position 这样的带有相对值的样式，然后放置空格从你想要的每一面，像这样：

position:relative; left:10px;

我希望描述在图片旁边

I want the description to be next to the images

html

css

image