line-block的運用最小寬度的設定_經驗交流
來源:互聯網
上載者:User
網上找到的正規描述:
引用內容
這個值導致一個元素產生一個塊狀盒模型(block box),而本身作為單一的內聯盒模型(inline box)流動排列(flow),類似一個被替代的元素。Display值為inline-block的元素內部形成一個塊狀盒模型,而本身形成類似一個內聯的被替代元素
PS:可惜IE不支援,FF也不支援。HOHO~
IE解決方案:觸發IE的layout,從而使該元素具備類似line-block的特性。
FF解決方案:使用moz專屬屬性: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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="PRcss,xhtml,html,css,js,book,個人首頁,無聊,神經,懶惰" /> <meta name="description" content="PRcss的個人首頁,無聊的,神經的,懶惰的..." /> <meta name="Author" content="PRcss,qq:50198763" /> <meta name="Copyright" content="本頁著作權歸PRcss所有。All Rights Reserved" /> <title>line-block的運用:最小寬度的設定 - www.jb51.net</title> <style type="text/css"><!-- .box { display:inline; zoom:1; min-width:400px; width:auto!important; width:400px; clear:right; border:1px solid #000; background:#ccc; } html:lang(zh-CN) .box { display:-moz-inline-box; } .box img { display:block; width:100px; height:300px; background:#c00; } --></style> </head> <body> <p class="box"> </p> <p>測試</p> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
.box { display:inline; zoom:1; min-width:400px; width:auto!important; width:400px; clear:right; border:1px solid #000; background:#ccc; }
html:lang(zh-CN) .box { display:-moz-inline-box; } /* moz-ff */