Каков наилучший способ размещения html divs по горизонтали?

Question

Этот код

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

отображает дивы, как это.

div1 
div2 
div3 
div3 

Я хочу, чтобы отобразить их, как

div1 div2 div3 div4 

Количество дивы, размещенной горизонтально не фиксируется и изменяется, так что я не могу писать классы 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

Установить стиль отображения на встроенный блок

<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, вы можете добавить отступы ...