Question

我有一个Shopify产品页面，我想在该页面上显示产品描述“框”旁边的图像。描述框包含产品名称，描述，“立即购买”按钮等。图像在左侧，桌面上的描述框在右侧。

图片和说明框必须并排放置，并且移动设备必须响应，并且说明框必须移动到图片下方。

某些产品的描述可能比其他产品更长，因此DIV描述框将不得不随着内容的增长而缩小。

我使用 flexbox 进行此设置。当描述非常简短时，描述框的大小与带有背景色填充的图像的大小相同。但是，当描述较长时，描述框会增长以适合内容，但是图像不会随之缩放。参见下面的图片。如何获得与内容成比例的图像？我不介意如果图像变大，边缘是否会被裁剪。

带有简短说明的图像-适合图像。

说明较长的图片-图片不合适。

HTML -为简洁起见，删除了不相关的代码

<div class="product-details-row">
<div class="product-details-column"><!-- Image here -->
    <img class="product-details-image" src="https://pmcvariety.files.wordpress.com/2018/01/carey-mulligan1.jpg?w=700" />
</div>

<div class="product-details-column product-details-right"><!-- Product details here -->
    <h3 class="product-name">{{ product.title }}</h3>

    <div class="product-gallery-heading">
        {{ ImagsGallaryheading[imagesgallaryheading] }}
    </div>

    <section class="price-and-reviews-row">
        <div style="width: 50%; height: auto;float: left;">
            <span>
                <p class="product-content-box-price">
                    <span>{{ current_variant.price | money }}</span>              
                </p>
            </span>
        </div>

        <section>
            <p class="product-hero-image-content-box">{{ product.description }}</p><!-- Product details grows/shrinks here -->
        </section>
    </section>

    <hr style="display: block; height: 1px; border: 0; border-top: 1px solid rgba(215,215,215,0.5); margin: 1em 0; padding: 0;">

    <p class="color-box available-from">Available colours:</p>
    <div class="color-square-container green-color-square"></div>
    <div class="color-square-container blue-color-square"></div>

    <div class="btn_banner">
        <div class="button-buy">
            <!-- N/A content removed -->
        </div>
    </div>
</div>

CSS

.product-details-row {
display:-ms-flexbox;
display:-webkit-flex;
display:flex;
margin-bottom:2.5em;
}
.product-details-column {
-webkit-flex:1;
-ms-flex:1;
flex:1;
}
img.product-details-image {
display:block;
max-width:100%;
height:auto;
width:auto;
}
.product-details-right {
background-color:#C15031;
padding:2em;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.35);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.35);
color:#ffffff;
}
.product-gallery-heading {
font-family:Comfortaa;
color:#d7d7d7;
}
.price-and-reviews-row {
margin-top: 4em;
margin-bottom: 2em;
}
p.product-content-box-price {
color: #ffffff;
font-size: 2em;
font-weight: 400;
}
p.product-hero-image-content-box {
color:#333333;
font-family:Arial;
font-weight:300;
}
.available-from {
color:#ffffff;
font-family:Comfortaa;
font-weight:400;
font-size:0.8em;
}
.color-square-container {
float: left;
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid #ffffff;
}
.green-color-square {
background: #009966;
}
.blue-color-square {
background: #ab3fdd;
}

第二，弹性框没有响应。如何设置它，以便在移动设备上查看页面时，描述框会移动到图像下方？我尝试将媒体查询设置为 .product-details-row 的 display：relative ，但这不起作用。

当前移动视图的外观。

Answer 1

尝试一下：

.flexEqH {
  display: flex;
  flex-direction: row;
}

#div1 {
  background-color: red;
}

#div2 {
  background-color: blue;
  color: white;
}

<section class="flexEqH">
  <div id="div1">IMAGE</div>
  <div id="div2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis est nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In sodales nisl ut faucibus faucibus. Cras sit amet elit at erat laoreet posuere nec sit amet metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris in interdum felis. Suspendisse et rhoncus tortor. Pellentesque iaculis orci sapien, eget efficitur neque hendrerit a. In tempor sit amet arcu at fermentum. </div>
</section>

Answer 2

以下应适用于此：）您可能只需要相应地修改第一框和第二框的宽度即可。

JS小提琴：here！

<html>
   <body>
      <div class="wrapper">
         <div class="box-one">
          Box 1
           <img src="imagelink" alt="your image alt text">
         </div>
         <div class="box-two">
          <h2>Title</h2>
           <p>
            Box 2 - some content!
           </p>
         </div>
      </div>
  </body>
</html>

.wrapper {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
 }

 .box-one {
    background-color: pink;
    width: 50%;
    height: auto;
    overflow: hidden;
  }

  .box-two {
    background-color: blue;
    width: 50%;
    height: auto;
    min-width: 400px;
  }

使2个DIV并排保持相同的高度并响应移动

2 个答案: