The formal description found online:
Reference content
This value causes an element to produce a blocky box model (Block box), which itself flows as a single inline box model (flow), similar to an substituted element. A block box model is formed inside an element with the display value of Inline-block, and itself forms a surrogate element similar to an inline
PS: Unfortunately IE does not support, FF also does not support. hoho~
IE solution: Triggers the layout of IE, so that the element has similar line-block features.
FF Solution: Use Moz Exclusive properties: Display::-moz-inline-box;
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" lang= "ZH-CN" xml:lang= "ZH-CN" > <pead> <meta http-equiv= " Content-type "content=" text/html; Charset=utf-8 "/> <meta name=" keywords "content=" prcss,xhtml,html,css,js,book, personal homepage, boredom, nerves, laziness "/> <meta Name= "description" content= "Prcss's homepage, boring, nervous, lazy ..."/> <meta name= "Author" content= "prcss,qq:50198763"/ > <meta name= "Copyright" content= "This page is owned by PRCSS. All rights Reserved "/> <title>line-block application: Minimum width setting-www.jb51.net</title> <style type=" Text/css "& gt;<!--. box {display:inline; zoom:1; min-width:400px; width:auto!important; width:400px; clear:right; border:1px so Lid #000; Background: #ccc; } Html:lang (ZH-CN). box {Display:-moz-inline-box;} . box img {display:block; width:100px; height:300px; background: #c00;} --></style> </pead> <body> <p class= "box" > </p> <p> Test </p> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
. box {display:inline; zoom:1; min-width:400px; width:auto!important; width:400px; clear:right; border:1px solid #000; ba Ckground: #ccc; }
Html:lang (ZH-CN). box {Display:-moz-inline-box;}/* MOZ-FF */
