如何创建左侧图像和右侧内容

Question

这是内容下的桌面模式图像。在选项卡模式下，我需要在内容之后的图像 左侧图像和右侧内容。我正在使用 bootstrap 3 和 sass。

我已经为标签模式创建了这样的内容，但它对我来说无法正常工作：

     div:nth-child(2),div:nth-child(3){
                position: absolute;
                right: 51px;
                top: 95px;
                width:50%;
               
            }

  <div class="col-md-3  col-xs-12 hiw-cols-first">
          <picture>
            <img class="hiw-tab-images" src="images/p-tab.png">
            <img class="hiw-images" src="images/r-product.png">
          </picture>
          <div class="hiw_heading">Obtain your Product</div>
          <div class="hiw-subpara">dable content of a page when looking at its layout. The point 
         of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as 
            opposed to using 'Content here, content here', making it look like readable English. 
               Many desktop </div>
     </div>



         

我已经完成了桌面模式，但我需要标签模式的帮助，请任何人帮忙。

Answer 1

在这种情况下，您可以使用flexbox

请检查下面的sn-p：

.hiw-cols-first {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

<div class="col-md-3  col-xs-12 hiw-cols-first">
          <picture>
             <img class="hiw-tab-images" src="images/p-tab.png">
             <img class="hiw-images" src="images/r-product.png">
          </picture>
          <div>
          <div class="hiw_heading">Obtain your Product</div>
          <div class="hiw-subpara">dable content of a page when looking at its layout. The point 
         of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as 
            opposed to using 'Content here, content here', making it look like readable English. 
               Many desktop </div>
          </div>
</div>

Answer 2

你不需要上面的 CSS。您正在使用引导程序，因此您可以简单地使用 row 和 col 类来完成。 试试这个

<div class="col-md-3  col-xs-12 hiw-cols-first">
      <div class="row"> 
 <div class="col-4">
 <picture>
        <img class="hiw-tab-images" src="images/p-tab.png">
        <img class="hiw-images" src="images/r-product.png">
      </picture>
 </div>          
 <div class="col-8">
  <div class="hiw_heading">Obtain your Product</div>
      <div class="hiw-subpara">dable content of a page when looking at its layout. The point 
     of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as 
        opposed to using 'Content here, content here', making it look like readable English. 
           Many desktop </div>
 </div>
 </div>
 </div>

由于您使用的是 bootstrap 3，您需要添加 md, sm 和 col 类。使用引导程序 3 更新代码

<div class="col-md-3  col-xs-12 hiw-cols-first">
      <div class="row"> 
 <div class="col-md-4 col-xs-4">
 <picture>
        <img class="hiw-tab-images" src="images/p-tab.png">
        <img class="hiw-images" src="images/r-product.png">
      </picture>
 </div>          
 <div class="col-md-8 col-xs-8">
  <div class="hiw_heading">Obtain your Product</div>
      <div class="hiw-subpara">dable content of a page when looking at its layout. The point 
     of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as 
        opposed to using 'Content here, content here', making it look like readable English. 
           Many desktop </div>
 </div>
 </div>
 </div>

JSfiddle 链接https://jsfiddle.net/e5zro9qg/1/