强制列表使用CSS在响应式页面布局中围绕div元素流动

Question

对StackOverflow上一篇文章的快速回复感到鼓舞，我将看看是否可以对以下事项有任何新想法。

我正在创建一个自适应网站，下面的蓝框是“新闻”项目。白盒子是一种预告类型的盒子，具有不同的造型。

（这些盒子只是一个较大的浮动盒子流的切口，有很多不同类型的盒子。）

问题是能够在桌面模式下在预告片盒周围传播新闻项目，然后在移动版面中分离/平铺它们。

标记新闻列表包含在一个内部有4个div的div中。我认为这是一个大问题......将另一个div放在与新闻项目相同的级别上不会有问题。但任何关于解决这个问题的超级框架的内容或提示都值得赞赏...

请随意弄乱这个小提琴：

http://jsfiddle.net/m4Pr9/

MARKUP

<div class="box-layout">
    <div class="box list-container">
        <div class="box news-box">This is a news item</div>
        <div class="box news-box">This is a news item</div>
        <div class="box news-box">This is a news item</div>
        <div class="box news-box">This is a news item</div>
    </div>
    <div class="box teaser-box">This is the teaser box</div>
</div>

CSS

body{
 width: 400px;   
}
.box-layout{
    width: 400px;
    border: 2px solid red;
    overflow: hidden;
    position: relative;
    padding: 10px;
    color: #fff;
}
.clear{
    clear:both;
}
.box{
    float: left;
}
.list-container{
    background: #509EB8;

}
.news-box{
    width: 100%;
    background: #003057;
    margin: 5px;
    height: 60px;
}

.teaser-box{
    background: #B03C3F;
    height: 135px;
    width: 100px;
    float: right;
}

Answer 1

我设法做到这一点，而不必打破包含新闻项目的div。我不确定这个解决方案有多动态，但它可能会给一些观众提供解决类似问题的好主意。

通过将标记中的前导div放在标记中，然后将其浮动到右侧，文本将在预告片的边缘“停止”。然而，新闻项目框的背景仍然浮现在预告片之下。

我删除了背景，嵌套了另一个文本元素，其样式与新闻项目相同，并添加了一个将文本元素推向右侧的间隔符，使得新闻项目在预告片之前实际上“停止”的错觉......

有点难以解释，但请看一下代码：

http://jsfiddle.net/mALKb/

<强>标记

<div class="box-layout">
    <!-- Teaser box OUTSIDE the list container below -->
    <div class="box teaser-box">This is the teaser box</div>

    <!-- List container for the news items -->
    <div class="list-container">
        <!-- Full width boxes -->
        <div class="box news-box-featured">This is a news item</div>
        <div class="box news-box-featured">This is a news item</div> 

        <!-- None full width news items -->
        <div class="box news-box">
            <div class="spacer">&nbsp;&nbsp;spacer</div>
            <div class="text">This is a news item</div>
        </div>
        <div class="box news-box">
            <div class="spacer">&nbsp;&nbsp;spacer</div>
            <div class="text">This is a news item.</div>
        </div>
    </div>
</div>

<强> CSS

body{
    color: #fff;
    font-family: verdana;
}
.news-box-featured{
    width: 100%;
    background: #003057;
    height: 60px;
    margin-bottom: 10px;
}
.teaser-box {
    float:right;
    width:200px;
    background: #B03C3F;
    height: 130px;
    margin-top: 140px;
    opacity: 0.7;
}
.list-container {
    width: 100%;
}

.news-box{
    height: 60px;
    margin-bottom: 10px;
}
.text{
    background: #003057;
    height: 60px;
    display: flex;
}
.spacer{
    border: dashed 1px #666666;
    height: 58px;
    display: inline-block;
    width: 208px;
    float: right;
    margin-right: -200px;
    opacity: 0.5;
}

通过这种方式，我不必使用框架。我也可以轻松地将其设置为具有较小屏幕的设备的长列表...

/ Jesper Wilfing

Answer 2

您似乎可以从使用Bootstrap中受益。它是一个响应式设计框架，可以处理您所指的那种事物。

它使用行/列方法进行响应式设计，可以轻松处理您的场景。