Question

您好我正在尝试实现如下图所示的内容（使用Bootstrap 3.3.2）

enter image description here

我成功创建了第一个块（图像中的第一个图像可以这么说）但是有可能以设计的方式创建设计，它会自动转换为图像中的第二个设计吗？

我正在努力（不确定它是否可能）。需要注意的一件重要事情是，第一个设计中的Ad1必须跨越两个第一行。不幸的是，不能选择在ad1下面的第2行开始。

以下是我的第一个块

<div class="row">
  <div class="col-sm-12 col-lg-8 ">
    <div class="row">
        <div col-sm-4 col-lg-4 ">
            Img1
        </div>
        <div class="news-entry-content col-sm-8 col-lg-8 ">
            Text1
        </div>
    </div>
    <div class="row">
        <div class="news-entry-image col-sm-4 col-lg-4">
            Img2
        </div>
        <div class="news-entry-content col-sm-8 col-lg-8">
            Text2
        </div>
    </div>
</div>
<div class="col-sm-12 col-lg-4" title="First News Werbiung">
    Ad1
</div>

感谢您的帮助

修改

我添加了请求的jsfiddle http://jsfiddle.net/v0r5y7q9/

只是玩弄宽度。你会发现两个问题。

宽度较大：广告位于下方（Img2 + Text2），我希望它位于下方（Img3 + Text3）
宽度较窄：（Img3 + Text3）与其他行相比处于关闭状态。考虑到我如何构建整个事物，这是有道理的。对此的一个解决方案可能是负边际。或者有更好的解决方案吗？

感谢。

Answer 1

如果你项目中元素的高度是固定的，我会用这个转变来得到你想要的。只需在需要时将添加更改为绝对位置，并将其放在元素的底部。就像在 fiddle

中一样

@media only screen and (max-width : 500px) {

    .ad1 {
     position:absolute;
     /*and bottom:x based on the height of your elements*/

}}

Answer 2

这可能是一个解决方案：jsfiddle

see jsfiddle link

这是两个可见/隐藏的广告块，但我找不到更好的解决方案。

P.S。如何将jsfiddle-link直接放在帖子中？

bootstrap，带有rowspan的复杂嵌套列

2 个答案: