html - display:inline-block with border? -
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <head> <style type="text/css"> body { margin:0;padding:0;} </style> </head> <body> <div> <div style="width:1000px;margin:0 auto;"> <div style="width:700px;display:inline-block;">1</div> <div style="width:300px;display:inline-block;">2</div> </div> </div> </body> </html> i want these blocks flush, second block pushed down.. if change width of second block 296px works..
i don't want use float:left because require 1 more block clear:both;.
this have @ moment, reduced in size:
i don't want use float:left because requires 1 more block "clear:both;".
with float: left, can clear/contain floats without adding element clear: both. can adding overflow: hidden (or clearfix) on parent element.
if want stick display: inline-block..
the first thing need remove whitespace between 2 divs.
if want add border, can add wrapper elements , add borders that.
or, can use box-sizing: border-box shown here.
Comments
Post a Comment