Reputation: 15683
I have several boxes in html as
<div class="parent">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
defined with css
.box{
width : 200px;
height : 300px;
display : block;
float : left
}
Is there a way to provide a log text in the parent DIV
and flow the text within child DIV
s with CSS
? or it should be done with Javascript
?
Of course, it does not matter where to provide the text, I just want to flow the excess text to the next box.
Upvotes: 0
Views: 3163
Reputation: 13863
Change your HTML to be a single element containing the content, such as:
<div class="parent">
<div class="box"></div>
</div>
And then add these style specifications:
.box {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
height: 10em; /* Or whatever height is appropriate. */
}
For more information on CSS Columns, see http://css-tricks.com/snippets/css/multiple-columns/ or https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts#The_columns_shorthand.
Upvotes: 5