Menu
I'm trying to align small boxes in a row. These boxes have something like 2 elements in each. In some cases, the first element is so "much" text, that it splits into 2 lines. If this happens, all other blocks in this special line are shown below.
Long story short, here is the example: http://jsfiddle.net/PMRQ5/
If you resize the HTML field, you can see what I mean. Can somebody help?
.songlist .even { background: #c2e4fa; background: -moz-linear-gradient(top, #d9eefc, #c2e4fa); margin-right: 5px; } .songlist .odd { background: #faf4c2; background: -moz-linear-gradient(top, #fcf8d9, #faf4c2); margin-right: 5px; } .songlist .itemBox { font-size: 11px; width: 220px; min-height: 100px; clear: both; padding: 5px; margin: 5px 10px 5px 10px; display: inline-block; position: relative; border-radius: 4px; } .songlist .itemBox .title { font-weight: bold; font-size: 16px; } .songlist .itemBox .artist { clear: left; font-size: 11px; } .songlist .itemBox .titlerating { bottom: 10px; left: 10px; position: absolute; } .songlist .itemBox .dance { bottom: 5px; right: 10px; position: absolute; }<div class='songlist'> <div class='itemBox even'> <div class='cover'></div> <div class='title'>You and you</div> <div class='artist'>101 Strings Orchestra</div> <div class='clear'></div> </div> <div class='itemBox odd'> <div class='title'>The Queen's lace hankerchief waltz</div> <div class='artist'>101 Strings Orchestra</div> <div class='clear'></div> </div> <div class='itemBox even'> <div class='cover'></div> <div class='title'>Voices of spring</div> <div class='artist'>101 Strings Orchestra</div> <div class='clear'></div> </div> <div class='itemBox odd'> <div class='cover'></div> <div class='title'>Roses from the south</div> <div class='artist'>101 Strings Orchestra</div> <div class='clear'></div> </div> </div>
506
To align things in the inline direction, use the properties which begin with justify- . Use justify-content to distribute space between grid tracks, and justify-items or justify-self to align items inside their grid area in the inline direction.
Inline-elements can be aligned horizontally with the help of CSS text-align property.
Even though the property says “text” align, it affects all elements inside the block-level element that are either inline or inline-block elements. The property only affects the content inside the element to which it is applied, and not the element itself.
Changing element levels You can change the visual presentation of an element using the CSS display property. For example, by changing the value of display from "inline" to "block" , you can tell the browser to render the inline element in a block box rather than an inline box, and vice versa.
http://jsfiddle.net/PMRQ5/1/
Add vertical-align: top or vertical-align: bottom to the box, depends on what you want.
56
.songlist .even { background:#c2e4fa; background:-moz-linear-gradient(top,#d9eefc,#c2e4fa); margin-right:5px; } .songlist .odd { background:#faf4c2; background:-moz-linear-gradient(top,#fcf8d9,#faf4c2); margin-right:5px; } .songlist .itemBox { font-size:11px; width:220px; min-height:100px; clear:both; padding:5px; margin:5px 10px 5px 10px; display:inline-block; position:relative; border-radius:4px; vertical-align: bottom; } .songlist .itemBox .title { font-weight:bold; font-size:16px; } .songlist .itemBox .artist { clear:left; font-size:11px; } .songlist .itemBox .titlerating { bottom:10px; left:10px; position:absolute; } .songlist .itemBox .dance { bottom:5px; right:10px; position:absolute; }<div class='songlist'> <div class='itemBox even'> <div class='cover'></div> <div class='title'>You and you</div> <div class='artist'>101 Strings Orchestra</div> <div class='clear'></div> </div> <div class='itemBox odd'> <div class='title'>The Queen's lace hankerchief waltz</div> <div class='artist'>101 Strings Orchestra</div> <div class='clear'></div> </div> <div class='itemBox even'> <div class='cover'></div> <div class='title'>Voices of spring</div> <div class='artist'>101 Strings Orchestra</div> <div class='clear'></div> </div> <div class='itemBox odd'> <div class='cover'></div> <div class='title'>Roses from the south</div> <div class='artist'>101 Strings Orchestra</div> <div class='clear'></div> </div> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
