添加太多内容时将容器分开

时间:2013-10-16 09:31:45

标签: html containers

我已经制作了一个页面,其中包含许多“盒子”,每个盒子都有一个食谱和描述等。当实时和完全编码(PHP太快添加)。每个框中的内容量会有所不同,如果您现在查看页面看起来很好,但我通过在其中一个容器中添加更多描述文本来强调测试它并且它会破坏布局。

这最终会被移交给开发人员来完成所有的PHP等,但是想知道人们有什么想法来解决这个问题(如果最好的话,在PHP中也是如此,那么只是传递消息/想法。)

这是页面的实时网址,看起来很好。 - http://jordancharters.co.uk/testarea/boxes.html

这是相同的页面,但容器内容太多(当客户端添加的文本比我最初想象的要多时,可能会发生这种情况)。打破布局。 - http://jordancharters.co.uk/testarea/boxes2.html

寻找HTML或PHP等解决方案(我只是一个前端开发人员。)

1 个答案:

答案 0 :(得分:0)

您必须在style.css第902行中将boxrecipes-container类赋予固定高度,并添加overflow:overlay属性,以便使用滚动条显示大文本。 溢出:隐藏将隐藏具有固定高度的额外文本,但您的标题不可点击,因此要使“选择配方”按钮可见溢出应该叠加。

尝试以下代码希望它有用

.boxrecipes-container {
padding: 10px;
width: 430px;
height: 230px;
overflow: overlay;
background-color: #eee;
display: block;
margin-right: 10px;
margin-top: 20px;
position: relative;
float: left;
}