多柱和收缩包装

时间:2011-12-27 16:25:08

标签: html css css3

我一直在尝试制作一个具有固定高度的布局并创建尽可能多的布局 需要一定大小的列来显示一些流文本。这是有效的,但是当我把它放在div中时,div不采用内容的大小(意思是:如果页面可以包含整个文本,如果我在页面的整个宽度,则示例中的红色会超出页面的整个宽度获得一个水平滚动条,它不会超过最初的视野)。我从这个页面http://haslayout.net/css-tuts/CSS-Shrink-Wrap尝试了几种收缩包装方法。然而,他们都没有工作。

这里是示例代码:

<body style="">
    <div style="background: red; display: inline-block; -webkit-column-width: 300px; -moz-column-width: 300px; height: 100px;">
        <p style="float: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Suspendisse blandit commodo dolor, et dapibus sem ultrices in.
            Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            In ac elit aliquet felis vestibulum iaculis. Donec nec risus at justo luctus vestibulum.
            Proin mollis sapien et odio interdum tempus.
            Mauris consequat arcu vitae justo tempor quis mattis magna pulvinar.
        </p>
    </div>
</body>

我用chrome和firefox尝试过这个。此外,如果我省略了高度和colunm-with,而且只是固定宽度,收缩包装也可以工作。

1 个答案:

答案 0 :(得分:0)

column-width不是问题。单独设置heightauto应该可以解决问题。

在这里小提琴:http://jsfiddle.net/XTGTY/