https://jsfiddle.net/6g6176zs/1/は単純な 2 列の CSS レイアウトで、画像が非常に広いため複数の列にまたがっていますが、残念ながらテキストが画像の上に重なっています。
column-span:all
画像を含むpのみを配置できることは知ってい<p>
ますが、ワイド画像(またはテーブルまたは何を持っているか)が含まれているかどうかを知らずに、テキストが画像の周りを流れるようにする方法はありますか(フロートのように)?
理想的には、テキストは、可能な限り column-width まで列を埋めるように流れます:
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>