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

Posted 2023-03-06

【中文标题】如何创建左侧图像和右侧内容

【英文标题】：how to create left side image and right side content

【发布时间】：2021-05-12 01:41:15

【问题描述】：

这是内容下的桌面模式图像。在选项卡模式下，我需要在内容之后的图像 左侧图像和右侧内容。我正在使用 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>



         

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

【问题讨论】：

希望对你有帮助jsfiddle.net/9k8w1fpq/4

我需要平板模式下的左侧图像和右侧内容。

【参考方案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>

【讨论】：

它实际上是正确的方式，但它不适合我。

【参考方案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/

【讨论】：

您是否在项目中添加了正确的引导链接？

请您为此编写 css 或 sass。这不适用于单个 cols，我需要超过 3 个 cols

你不需要 css。所有这些类都在 bootstrap 3 中可用。因此，您可以根据需要的网格数量或屏幕尺寸类型来修改类。这个链接可能对你有帮助getbootstrap.com/docs/3.4/css