这是用于内容下的桌面模式图像。在选项卡模式下,我需要在内容之后的图像,例如 左侧图像和右侧内容。我正在使用引导程序 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>
我已经完成了桌面模式,但我需要选项卡模式的帮助,请任何人帮助做到这一点。
答案 0 :(得分:0)
你不需要上面的 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>
由于您使用的是引导程序 3,因此您需要添加 md、sm 和 col 类。使用 bootstrap 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/
答案 1 :(得分:0)
在这种情况下,您可以使用 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>