时间戳

首页 > 解决方案 > 如何创建左侧图像和右侧内容

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

问题描述

在此处输入图像描述

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

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

标签： htmlcsssasstwitter-bootstrap-3

解决方案

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

请检查以下代码段：

.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>

推荐阅读