使用css列数/列宽，我可以在大图像周围进行文本流动吗？

时间：2016-03-13 16:53:47

标签： css css-float css-multicolumn-layout

https://jsfiddle.net/6g6176zs/1/是一个简单的2列CSS布局，其中图像横跨多个列，但不幸的是文本覆盖了图像。

我知道您只能将column-span:all放在包含图片的p上，但有没有办法，却不知道哪个<p>包含一个宽图像（或表格或者你有什么） ），以确保文本在图像周围流动（如浮动）？

理想情况下，文本会流动，以便尽可能填充列，直到列宽： enter image description here

的CSS：

body {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
 -webkit-column-width: 50px;
 -moz-column-width: 50px;
  column-width: 50px;
}

HTML：

<html>
<head> <title>column-clear</title> </head>  
<body>
<p> <img src="http://bildr.no/image/bHEvbVFz.jpeg"/> </p>    
<p>Id reiciendis rerum illum ut minus eos reiciendis et. Odio vel non autem. Et in ut harum quaerat repellat maxime vel odit. Mollitia inventore officia voluptas et.Vitae assumenda harum et omnis. Qui eum in explicabo molestiae. Et reiciendis non vel blanditiis et maxime. Rerum odit recusandae ipsa. Ea ut in aut cum numquam dolores eos velit. Quia sit est velit fugiat ipsum ut doloremque mollitia.Sit dolorem sunt quia officia nihil corporis eos dolores. Dolores consequatur est quisquam laboriosam deserunt. Ipsa illo tempore tempora et sed. Est quisquam rem blanditiis ullam non unde magni. Non blanditiis aut fugit alias magnam.Hic qui minima et est quasi. Ducimus quos odio voluptatibus temporibus ipsa sunt. Harum reprehenderit dolores soluta ut itaque. Qui ipsa suscipit nisi.Debitis quibusdam exercitationem ex quos doloremque et minima ut. Suscipit saepe et voluptatem. Voluptatem suscipit ut odio. Possimus ut expedita vel ex sequi nesciunt dolor debitis. Sed iusto consequatur labore animi sint qui inventore blanditiis. Ut qui velit nobis esse.    </p>
<p>Id reiciendis rerum illum ut minus eos reiciendis et. Odio vel non autem. Et in ut harum quaerat repellat maxime vel odit. Mollitia inventore officia voluptas et.Vitae assumenda harum et omnis. Qui eum in explicabo molestiae. Et reiciendis non vel blanditiis et maxime. Rerum odit recusandae ipsa. Ea ut in aut cum numquam dolores eos velit. Quia sit est velit fugiat ipsum ut doloremque mollitia.Sit dolorem sunt quia officia nihil corporis eos dolores. Dolores consequatur est quisquam laboriosam deserunt. Ipsa illo tempore tempora et sed. Est quisquam rem blanditiis ullam non unde magni. Non blanditiis aut fugit alias magnam.Hic qui minima et est quasi. Ducimus quos odio voluptatibus temporibus ipsa sunt. Harum reprehenderit dolores soluta ut itaque. Qui ipsa suscipit nisi.Debitis quibusdam exercitationem ex quos doloremque et minima ut. Suscipit saepe et voluptatem. Voluptatem suscipit ut odio. Possimus ut expedita vel ex sequi nesciunt dolor debitis. Sed iusto consequatur labore animi sint qui inventore blanditiis. Ut qui velit nobis esse.    </p>
</body>
</html>

0 个答案:

没有答案
相关问题
最新问题