水平定位html div的最佳方式是什麼？

Question

此代碼

<div id="div1"></div> 
<div id="div2"></div> 
<div id="div3"></div> 
<div id="div4"></div> 

顯示器的div這樣。

div1 
div2 
div3 
div3 

欲像

div1 div2 div3 div4 

水平放置的div的數目不是固定的，並且改變顯示這些，所以無法寫CSS類與左填充，定義的寬度等。

最好的辦法是做什麼？

Answer 1

使用Flexbox的：

.container { 
 
    display:flex; 
 
    flex-direction:row; 
 
} 
 
.container > div { 
 
    border:5px dotted black; 
 
    background:red; 
 
    flex-grow:1; 
 
    padding:2em; 
 
    text-align:center; 
 
}

<div class="container"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
</div>

Some prefixing may be required depending on your target audience。

Learn about all the possibilities here。

Answer 2

設置顯示樣式，以inline-block的

<div id="div1" style="display:inline-block"></div> 
<div id="div2" style="display:inline-block"></div> 
<div id="div3" style="display:inline-block"></div> 
<div id="div4" style="display:inline-block"></div> 

或更好，但

<style> 
#div1, #div2, #div3, #div4 { 
    display:inline-block 
} 
</style> 

Answer 3

只需添加一類像

<div id="div1" class="inline">lorem</div> 
<div id="div2" class="inline">ipsum</div> 

，並在你的CSS：

.inline { 
float:left; 
} 

Additionaly，你可以添加一些填充...