多個div在一個div中一行水平顯示(inline-block)
阿新 • • 發佈：2019-01-05
在之前的程式碼做簡單的更改也能實現
html程式碼：
使用者display做法是對將要顯示在一行的元素應用display:inline-block;既具有block的性質又具有in-line的性質 css
這樣做比較簡單，需要注意的是： 顯示在一行的div程式碼之間不能有空格回車等字元，否則將會出現莫名其妙的間距，原因是可能瀏覽器吧空格也當做block顯示了 還是以上面程式碼為例 這樣寫：
OK，如果這樣寫（非常可能這樣寫，程式碼看起來工整）：
html程式碼：
<div class="div">
<div class="div1">
left
</div><div class="div2">
right
</div>
<div class="div3">
bottom</div>
</div>使用者display做法是對將要顯示在一行的元素應用display:inline-block;既具有block的性質又具有in-line的性質 css
<style> html,body{ margin:0; padding:0; } div{ text-align:center; } .div{ background-color:#F00; overflow:auto; } .div>.div1{ width:50%; height:100px; line-height:100px; background-color:#0C0; display:inline-block; } .div>.div2{ width:50%; height:100px; line-height:100px; background-color:#aaa; display:inline-block; } .div3{ height:200px; line-height:200px; background-color:#FCF; } </style>
這樣做比較簡單，需要注意的是： 顯示在一行的div程式碼之間不能有空格回車等字元，否則將會出現莫名其妙的間距，原因是可能瀏覽器吧空格也當做block顯示了 還是以上面程式碼為例 這樣寫：
<div class="div">
<div class="div1">
left
</div><div class="div2">
right
</div>
<div class="div3">
bottom</div>
</div>OK，如果這樣寫（非常可能這樣寫，程式碼看起來工整）：
格式就不對了如下圖：<div class="div"> <div class="div1"> left </div> <div class="div2"> right </div> <div class="div3"> bottom</div> </div>