如何使css列环绕切口

Question

我想制作一个像上面那样的布局。如何使列环绕图像框？如果可能的话，我需要能够跨越多个列。我已经试了几个星期但没有用。

我尝试过flexbox，这可能是一个很好的解决方案，但我还没有让它发挥作用。

有没有一种简单的方法可以做到这一点？

非常感谢你！

Answer 1

我建议使用一个名为jQslickWrap的jquery插件来实现OP想要的效果。但是如果不想使用jquery或javascript，我们可以尝试使用普通的css方式。

现在OP想要一个报纸样式的页面。所以我提出了一个更大的容器div，其中有一些较小的列div（我已经使用了4个例子）所有浮动左侧并根据需要设置样式。

现在这里是代码......

#container{
    height:600px;
    width:80%;
    background:#cecece;
    margin:0 auto;
}
#col1,#col2, #col3, #col4 {
    height:100%;
    width:25%;
    box-sizing:border-box;
    float:left;
	padding: 2px 5px;
}
#col1{
    background-color:#ad2340;
}
#col2{
    background-color:#3d2ed4;
}
#col3{
    background-color:#f2234b;
}
#col4{
    background-color:#aa3340;
}

<div id="container">
    <div id="col1">
        <p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah.</p>
		<img src="http://dummyimage.com/190x120/000/fff.png"/>
		<p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah.</p>
		<p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum bla.</p>
    </div>
    <div id="col2">
        <p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah.</p>
		<p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum bla.</p>
        
        <p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah.</p>
        <p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah.</p>
    </div>
    <div id="col3">
        <p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah.</p>
        <p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah.</p><p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum bla.</p>
        <p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah.</p>
    </div>
    <div id="col4">
        <p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah.</p>
        <p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah.</p>
    </div>
</div>

希望这有帮助