Html 将较小的内联块div紧紧固定在左侧浮动的较大块div周围

在我尝试文本对齐之前，一切都很顺利：居中；我的沙发。显然，左浮动的div忽略了文本对齐，但是浮动的div需要这样才能在同一行上有两个较小的div

很难解释，但下面是一个代码示例，可以更好地描述它：

我想知道的是，如何使特色系列div像标准系列div一样工作，同时使其自身居中。谢谢

移除浮子：左侧；并添加边距：0自动；去吧

试试这个

CSS

---

最后我用了一点JS来捏造它。我知道这很淘气，但它确实起到了作用，而且资源也相当便宜

function centerContent(){
    $('.center-content').width( Math.floor($('.body').width()/306)*306 );
}

setInterval( centerContent, 250);

.中心内容有边距：0自动；它是所有系列div的容器。我发现因为我不能设置宽度，我真的不能做太多，所以我让JS根据屏幕大小将宽度设置为尽可能合适的宽度

不是最干净的解决方案，我更喜欢纯JS，但如果它能工作，它也能工作

---

编辑：.body类是一个在其内部加载ajax的div，当它改变大小时，它基本上就像普通页面上改变大小一样。

如果我删除float，标准系列div将不会堆叠在一起。我想你误解了，功能系列div直接右侧的标准系列div也必须堆叠。这就是我在原版中的标准系列div。确定一下，你在小屏幕上吗？对于小屏幕上正在发生的事情，可能无法立即看出。随着代码的更改，特色系列处于正确的位置，但它也将标准系列div移出了位置，我的问题基本上是，我如何同时拥有这两个。我现在理解了您想要实现的目标。让我编辑jsfiddle，这就是我想要达到的效果，是的，不幸的是，我不能真正设置宽度，因为我希望它占据尽可能多的屏幕。是否有可能使标题系列没有设置的像素宽度，只需将其宽度设置为屏幕上适合的宽度，但最小宽度是否在两侧都不留空白？对于您想要实现的目标，我建议使用引导框架。这将使您的生活更加轻松…这对于移动设备来说非常好，但不幸的是，它没有回答问题，因为930px以上的页面仍然存在问题。您希望它与下面的div对齐吗？它需要两行标准系列div，位于特色系列div的右侧，其余部分直接对齐在下面正如另一张海报所示，使用固定的像素宽度是可能的，但它需要能够扩展，必须是动态的。

.featured-series {
    width:606px;
    height:406px;
    display:inline-block;
    margin:0 auto;
    background-color:black;
}

@media(max-width: 930px) {
    .featured-series {
        margin: 0 auto;
        float: none;
    }
}

@media(max-width: 610px) {
    .featured-series {
         background-color: black;
        display: block;
        height: 200px;
        margin: 0 auto;
        vertical-align: top;
        width: 300px;
        float: none;
    }
}

function centerContent(){
    $('.center-content').width( Math.floor($('.body').width()/306)*306 );
}

setInterval( centerContent, 250);