HTML CSS examples for CSS Widget:Div Table
Row span in div table
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> * {<!-- w ww. j a v a 2 s . c o m--> padding:0; margin:0; outline:2px solid red; } body { background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png'); font-family:Helvetica; } #header { width:901px; margin:0 auto; } #wrapNews { width:921px; margin:0 auto; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .lineWrap { overflow:hidden; } .smallNews { display:inline-block; width:211px; height:201px; border:2px solid Chartreuse; float:left; box-sizing:border-box; margin:11px; } .lineNews { display:inline-block; width:441px; height:201px; border:2px solid yellow; float:left; box-sizing:border-box; margin:11px; } .mediumNews { display:inline-block; width:211px; height:421px; border:2px solid blue; float:left; box-sizing:border-box; margin:11px; } .bigNews { display:inline-block; width:901px; height:401px; border:2px solid pink; float:left; box-sizing:border-box; margin:11px; } </style> </head> <body> <div id="wrapNews"> <div class="bigNews"> Lor </div> <div class="mediumNews"> Lor </div> <div class="lineNews"> Lor </div> <div class="smallNews"> Lor </div> <div class="smallNews"> Lor </div> <div class="smallNews"> Lor </div> <div class="smallNews"> Lor </div> <div class="mediumNews"> Lorem ipsum dolor sit amet, consectetur adip </div> <div class="lineNews"> Lorem ipsum dolor sit a </div> <div class="mediumNews" style="float:right"> Lorem ipsum dolor sit amet, c </div> <div class="smallNews"> Lorem ipsum dolor s </div> <div class="smallNews"> Lorem ipsum dolor </div> </div> </body> </html>