如何对齐图像旁边的大文本

Question

我正在 html 上创建产品详情页面，其中一个 div 我有一张图片，另一个我有产品详情，当我在整个细节段落上添加大文本时 div 出现在图像 div 下有人能告诉我为什么它一直在发生吗？是因为 div 的大小未定义吗 after adding big text on it

[在上面添加大文字之前

html {
  position: relative;
  min-height: 100%;
  min-width: 100%;
}

body {
  margin-bottom: 60px;
  
}
a {
    color: inherit;
    text-decoration: none !important;
}
.small-paragraph2, .small-paragraph1{
    margin: 0;
}
.container {
    min-width: 90%;
    margin: auto;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 25px;
   
  
}
.product-image{
    width:400px;
    display:block;
    height: 400px;
}


.details {
    display:inline-block;
    margin:0; 
    vertical-align:top;
    
}

 .intro .text{
     line-height: 0.8;
 }

    <div class="container">
          
            <div style="display:inline-block;" >
                    <img class="product-image" src="/images/ruach-1.png" style="display:inline-block;">
                </div>
                <div class="details">
                 
                    <div class="intro">
                    <h3 class="text"><strong>Ruach 5781(AUDIO)</strong></h3>
                    <h4 class="text">New Jewish Tune</h4>
                    </div>

                    <h5>By <a asp-action="index" asp-controller="home">Various Artist</a>  Produced by
                      <a asp-action="index" asp-controller="home"> Joel English</a></h5>
                    <h6>Item: 955016DA</h6>
                    <button class="pro-button"><strong>Print Songbook with Audio</strong><br />.95</button>
                    <button class="pro-button"><strong>PDF Songbook</strong><br />.95</button>
                    <button class="pro-button"><strong>Digital Album</strong><br />.95</button>
                    <span class="minus wrapper" style="color:grey;">-</span>
                    <span class="num wrapper" style="color:grey;">1</span>
                    <span class="plus wrapper" style="color:grey;">+</span>
                     <a asp-action="index" asp-controller="home" class="myButton" style="border: 0px;"><i class="fa-solid fa-bag-shopping"></i>Add to Cart</a>
                     <a asp-action="" asp-controller="" style="display:inline-block;" class="addtolist">Add to List <i class="fa-solid fa-caret-down"></i></a>
                    <p class="small-paragraph1"><strong>10% off </strong>distracted by the readable content ofs layout.</p>
                    <p class="small-paragraph2">is simply dummy text of the printing and typesetting . Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                        when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
                        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially 
                        unchanged.is simply dummy text of the printing and typesetting . Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                        when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
                        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially 
                        unchanged.
                    </p>
                
                 </div>

]2

Answer 1

将 display: flex; 添加到 .container。

html {
  position: relative;
  min-height: 100%;
  min-width: 100%;
}

body {
  margin-bottom: 60px;
}

a {
  color: inherit;
  text-decoration: none !important;
}

.small-paragraph2,
.small-paragraph1 {
  margin: 0;
}

.container {
  margin: auto;
  margin-top: 25px;
  display: flex;
  gap: 10px;
}

.product-image {
  width: 400px;
  display: block;
  height: 400px;
}

.details {
  display: inline-block;
  margin: 0;
  vertical-align: top;
}

.intro .text {
  line-height: 0.8;
}

<div class="container">
  <div style="display:inline-block;">
    <img class="product-image" src="https://dummyimage.com/600x400/000/fff" style="display:inline-block;">
  </div>
  <div class="details">
    <div class="intro">
      <h3 class="text"><strong>Ruach 5781(AUDIO)</strong></h3>
      <h4 class="text">New Jewish Tune</h4>
    </div>
    <h5>By <a asp-action="index" asp-controller="home">Various Artist</a> Produced by
      <a asp-action="index" asp-controller="home"> Joel English</a></h5>
    <h6>Item: 955016DA</h6>
    <button class="pro-button"><strong>Print Songbook with Audio</strong><br />.95</button>
    <button class="pro-button"><strong>PDF Songbook</strong><br />.95</button>
    <button class="pro-button"><strong>Digital Album</strong><br />.95</button>
    <span class="minus wrapper" style="color:grey;">-</span>
    <span class="num wrapper" style="color:grey;">1</span>
    <span class="plus wrapper" style="color:grey;">+</span>
    <a asp-action="index" asp-controller="home" class="myButton" style="border: 0px;"><i class="fa-solid fa-bag-shopping"></i>Add to Cart</a>
    <a asp-action="" asp-controller="" style="display:inline-block;" class="addtolist">Add to List <i class="fa-solid fa-caret-down"></i></a>
    <p class="small-paragraph1"><strong>10% off </strong>distracted by the readable content ofs layout.</p>
    <strong>Description: </strong>
    <p class="small-paragraph2">is simply dummy text of the printing and typesetting . Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only
      five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.is simply dummy text of the printing and typesetting . Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
      took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </div>
</div>

如何对齐图像旁边的大文本

how to align big text beside image

html

javascript

css