html - CSS3 Columns , force elements to break -
i dont know how ask question, best :d
lets start pictures :
im sorry , reallyy dont know how ask question, want break elements first picture, got picture 2 , 3 css :
.contents{ background-color: rgb(57, 66, 100); border-radius:5px; overflow: hidden; display:inline-block; width:286px; margin: 5px 5px 5px 5px; float: right; }
html :
<div class='contents'> <div class='title'> <span class='nxnsh'>a</span> </div> <div class='content'> <ul class='nlisty'> <li><a href=''>as</a></li> <li><a href=''>as</a></li> <li><a href=''>as</a></li> <li><a href=''>as</a></li> </ul> </div> </div>
here's fiddle http://jsfiddle.net/qaagv/ want remove empty area between top row , bottom row
a fiddle make question easier understand structure.
can move on structure this? http://jsfiddle.net/y6gfs/
this create 3 columns layout , in each can have elements (articles).
.column-wrapper { width:100%; } .column { width:33%; float:left; display:inline-block; } .article { background-color:green; border: 2px solid pink; } <div class="column-wrapper"> <div class="column"> <div class="article"> content 1</div> </div> <div class="column"> <div class="article"> ish not lot</div> <div class="article"> here </div> </div> <div class="column"> <div class="article"> long 3 column layout atke room </div> <div class="article"> anne hatheway anyway </div> <div class="article"> final copy </div> </div> </div>
Comments
Post a Comment