Как сделать 3 divs бок о бок

Question

Как я могу сделать 3 divs бок о бок. где div1 будет крайне левым, div3 будет крайне правым и div2 посередине.

Я знаю, что это может быть сделано с помощью дисплея: flex и justify-content: space-between, но я ищу подход без flex.

Вот мой подход, но не смог добиться этого.

Я попытался сделать отображения всех Div в: встроенный блок и плавать: слева и плавать: право на двух крайних дивы и для среднего один я попытался маржу: авто, но похоже, что не уважает его

Пожалуйста, помогите

.container { 
 
    border: 1px solid; 
 
} 
 
.container div { 
 
    height: 50px; 
 
    width: 50px; 
 
    background: red; 
 
    display: inline-block; 
 
} 
 
#div1 { 
 
    float: left; 
 
} 
 
#div3 { 
 
    float: right; 
 
} 
 
#div2 { 
 
    margin: auto; 
 
}

<div class="container"> 
 

 
    <div id="div1"></div> 
 
    <div id="div2">he</div> 
 

 
    <div id="div3"></div> 
 
</div>

Answer 1

попробовать это. position: absolute;

.container { 
 
    border: 1px solid; 
 
    position: relative; 
 
    overflow: hidden; 
 
    
 
} 
 
.container div { 
 
    height: 50px; 
 
    width: 50px; 
 
    background: red; 
 
    display: inline-block; 
 
    
 
} 
 
#div1 { 
 
float: left; 
 
} 
 
#div3 { 
 
float: right; 
 
} 
 
#div2 { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
}

<div class="container"> 
 

 
    <div id="div1"></div> 
 
    <div id="div2">he</div> 
 

 
    <div id="div3"></div> 
 
</div>

Answer 2

не используйте float и inline-block вместе. Это будет работать:

<div class="container"> 
    <div id="div1"></div> 
    <div id="div2"></div> 
    <div id="div3"></div> 
</div> 

.container { 
    width:100%; 
} 

#div1, #div2, #div3 { 
    height: 50px; 
    background: red; 
    display: inline-block; 
    width:33.33%; 
    margin-right:-4px; 
} 

Если вы хотите стилизовать дивы индивидуально, то цель их индивидуально

Answer 3

.container { 
 
    border: 1px solid; 
 
    position: relative; 
 
} 
 
.container div { 
 
    height: 50px; 
 
    width: 50px; 
 
    background: red; 
 
    display: block; 
 
} 
 
#div1 { 
 
    float: left; 
 
} 
 
#div3 { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
} 
 
#div2 { 
 
    margin: auto; 
 
}

<div class="container"> 
 

 
    <div id="div1"></div> 
 
    <div id="div2">he</div> 
 

 
    <div id="div3"></div> 
 
</div>

Answer 4

это то, что ваш код будет

.container { 
     border: 1px solid; 
    } 
    .container div { 
     height: 50px; 
     width: 50px; 
     background: red; 
     display: inline-block; 
    } 
    #div1 { 
     float: left; 
    background-color:red; 
    } 
    #div3 { 
     float: left; 
     background-color:green; 
    } 
    #div2 { 
     float: left; 
     background-color:yellow; 
    } 

и

<div class="container"> 
    <div id="div1">div 1</div> 
    <div id="div2">div 2</div> 
    <div id="div3">div 3</div> 
</div> 

Answer 5

Пожалуйста, проверьте ниже CSS увидеть, если это то, что вы хотите:

.container { 
 
    float: left; 
 
    width: 300px; 
 
    border: 1px solid; 
 
} 
 
#div1 { 
 
    float: left; 
 
    width: 100px; 
 
    background-color: red; 
 
} 
 
#div2 { 
 
    float: left; 
 
    width: 100px; 
 
    background-color: green; 
 
} 
 
#div3 { 
 
    float: left; 
 
    width: 100px; 
 
    background-color: blue; 
 
}

<div class="container"> 
 
    <div id="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper eleifend volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</div> 
 
    <div id="div2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
    <div id="div3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper eleifend volutpat.</div> 
 
</div>