Question

我想在div中添加<p>。例如，这个div是200px高度，我想要的是：当<p>高于200px时，段落的其余部分会自动添加到第二个div中，以便有一个：news paper两列样式。所以我需要写，当第一个div（即第一列）已满时，段落将显示在第二个div（200px高度）上。请稍微查看我的简单代码。

<div class="content">
<div class="first">
    <p> Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi 
    </p>
</div>


<div class="second">
    <p>
    </p>
</div>

.content{
width : 200px;
height: 200px;
}

.first{
width: 95px;
height:200px;
float:left;
background-color:yellow;
 }

.second{
width: 95px;
 height:200px;
float: right;
background-color:blue;
}

如果您查看我的JSFFIDLE example，您可以看到超过第一个div（黄色）的＆＃34; HI＆＃34; s如何自动将这些＆＃34; hi＆＃34; s放入第二个div（蓝色的）

谢谢大家。

Answer 1

如果不使用CSS3属性，您尝试做的事情会非常困难。如果这不是问题，那么请查看这篇好文章以使用这些功能：https://css-tricks.com/guide-responsive-friendly-css-columns/

此处您拥有这些功能的当前支持，所有浏览器都支持这些功能，一如既往地排除旧版本的Internet Explorer。

http://caniuse.com/#search=column

Answer 2

没有办法（没有编程或JavaScript）添加“从一列到另一列，如果高度超过X”，这听起来非常像编程问题，不是吗？

有一些CSS3属性（列数和列宽）可以做到这一点，但如果你的网站需要IE9及更低版本的兼容性，那么这是不在桌面上的。

有一些jQuery插件（与所有内容一样），与IE9及以下版本兼容。例如Columnizer。

如何将文本放入div中，直到它的高度限制为止？

2 个答案: