CSS：将溢出项目变成新行

我刚刚买了一个WP主题：http://demo.wpzoom.com/evertis/，我想修改“精选文章”部分。CSS：将溢出项目变成新行

我不想使用滚动按钮来查看所有精选文章，而是想显示所有精选文章（即每行三篇文章）。

我尝试修改CSS，但无法得到我想要的。大多数“溢出”文章都是关于文本的。

 .scrollable { 

    /* required settings */ 

    position:relative; 

    overflow:hidden; 

    width: 930px; 

    height:400px; 

} 
.slide { 

-webkit-border-radius: 5px; 

-khtml-border-radius: 5px; 

-moz-border-radius: 5px; 

border-radius: 5px; 

background:#e6eef4; 

padding:10px; 

margin:0 20px 0 0; 

float:left; 

width:270px; 

position:relative; 

display:inline; 

}

我使用Firebug的Firefox和尝试不同的组合“显示：块”和“浮动：汽车”，但不能得到我想要的东西。我只能让它显示一行文章。

来源

2012-06-11 Susan Mayer

在合并/添加这个CSS将做到这一点：

#thumbs { 
    width: auto; 
    position: static; 
    overflow: hidden; 
} 
.scrollable { 
    overflow: visible; 
    height: auto; 
}

来源

2012-06-11 23:04:41 thirtydot

这是魔术！你的代码就像魅力一样！当我第一次看到你的答案时，我认真地怀疑它会起作用，因为你甚至没有改变“height：400px”和“float：left”。怎么可能？我在某处读到“float：left”和“display：inline”，主要负责这些东西。即使你没有在“.scrollable”中更改“height：400px”，你的代码如何工作？ –

这并不重要，因为'＃featured'保存了一天 - 它有'float：left'，因此它包含了浮动。我编辑了我的答案，看起来应该看起来完全相同，但更有意义。 – thirtydot

接受并且非常感谢！ –

CSS：将溢出项目变成新行

回答

相关问题