Two div boxes 1 & 2 with text, inside a 3rd div box. Sometimes text in box 1 is longer than…

Currently I have two div boxes 1 & 2 with text, inside a 3rd div box to contain them together.

Sometimes text in box 1 is longer than text inside box2 - I want text to flow around box2.  Sometimes text in box 2 is longer than text inside box1 - I want text to flow around box1.

All the while text flows in one direction Right
or Left
, depends on Float settings
.

How can box with more text surround box with lesser text?

How is that done using CSS?

Thanks!

Problem courtesy of: Ash501

Solution

Because they are in two divs they are not able to flow around each other because divs can only have 4 sides, being rectangular or square, they cant wrap around each other.

What you would need to do is only have one inner div, fill it with text and float it, then have the other text outside the floating div but still inside the outermost div, so that basically the free-flowing text’s parent is the outermost div, and the inner div has it’s own text inside.

This will allow the outer text to flow around the inner div and it’s contents, but theres no way to have 2 divs and automatically have them wrap around each other based on content length.

Edit:

If you use jQuery, you will be able to first set the two texts in hidden elements, have the content measured and then append the shorter content to the inner div and the longer content to outside that div so it wraps around it.

Solution courtesy of: CoreyRS

稿源:CSS3 Recipes (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Two div boxes 1 & 2 with text, inside a 3rd div box. Sometimes text in box 1 is longer than…

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录