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

Question

我正在创建一个响应式网站，下面的蓝色框是“新闻”项。白色盒子是一个具有不同样式的预告片盒子。

(这些框只是从一个更大的 float 框流中截取的，其中包含许多不同类型的框。)

问题是能够在桌面模式下让新闻项围绕预告框流动，然后在移动布局中将它们分开/平铺。

在标记方面，新闻列表包含在一个包含 4 个 div 的 div 中。我认为这是个大问题。将另一个 div 放在与新闻项相同的级别不会有问题。我正在寻求有关任何 super 框架的任何想法或技巧。

请随意弄乱这个 fiddle :

http://jsfiddle.net/m4Pr9/

标记

<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;
}

这样我就不用用框架了。我还可以轻松地将其设置为一长串用于较小屏幕设备的 block 列表...