Равномерное горизонтальное выравнивание трех divs

Я хочу создать три окна (черный, красный и синий), которые равномерно распределены по горизонтали. В свою очередь, я установил каждый div на inline-block, а затем установил три divs в left, center и right выровнять. Однако при визуализации три окна выравниваются влево. То, что я на самом деле хочу, это то, что первый ящик должен быть слева от внешнего div, третий ящик вверх против права внешнего div, а затем средний ящик должен быть точно в середине первого и третьего коробки.Равномерное горизонтальное выравнивание трех divs

Вот мой код:

<div style="width:1000px"> 
 

 
    <div style="display:inline-block; text-align:left; width:200px; height:100px; background-color:black"></div> 
 
    
 
    <div style="display:inline-block; text-align:center; width:200px; height:100px; background-color:red"></div> 
 
    
 
    <div style="display:inline-block; text-align:right; width:200px; height:100px; background-color:blue"></div> 
 

 
    </div>

источник

2016-12-07 Karnivaurus

Да я просто добавил, что внешний DIV в ширину 1000px, так что она должна поместим все три подряд. – Karnivaurus

Что вы ждете отсюда? Непонятно – Liam

Нажав влево, я имею в виду, что divs все выровнены слева от внешнего div. То, что я на самом деле хочу, это первый прямоугольник справа, второй ящик посередине, а затем третий ящик против права внешнего div. – Karnivaurus

Там, наверное, дюжину различных способов сделать это. Вот один:

<div style="width:1000px; text-align:center"> 
 
    <div style="display:inline-block; float:left; width:200px; height:100px; background-color:black"></div> 
 
    <div style="display:inline-block; width:200px; height:100px; background-color:red"></div> 
 
    <div style="display:inline-block; float:right;width:200px; height:100px; background-color:blue"></div> 
 
</div>

Float первый и последний DIV и установить выравнивание текста по центру родителя обрабатывать средний DIV.

Хорошо, вот еще один (с Flexbox):

<div style="width:1000px; display:flex; justify-content: space-between;"> 
 
    <div style="width:200px; height:100px; background-color:black"></div> 
 
    <div style="width:200px; height:100px; background-color:red"></div> 
 
    <div style="width:200px; height:100px; background-color:blue"></div> 
 
</div>

источник

2016-12-07 16:13:11 j08691

дисплей: встроенный блок; и float: left; не является хорошей комбинацией. Плавающие элементы имеют естественный дисплей: block; –

@JohannKratzik Попробуйте удалить встроенный блок из этого первого примера и посмотреть, что произойдет. – j08691

Downvoter хочет прокомментировать? – j08691

Вы можете плавать каждый из дивы в левой внутренней ширине контейнера 100%, затем 33% ширины на каждого.

#cointainer { 
 
    width: 100%; 
 
    color: white; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
#left { 
 
    width: 33%; 
 
    float: left; 
 
    background-color: black; 
 
} 
 
#center { 
 
    width: 33%; 
 
    float: left; 
 
    background-color: red; 
 
} 
 
#right { 
 
    width: 33%; 
 
    float: left; 
 
    background-color: blue; 
 
}

<div id="cointainer"> 
 
    <div id="left">blah blah blah</div> 
 
    <div id="center">blah blah blah</div> 
 
    <div id="right">blah blah blah</div> 
 
</div>

источник

2016-12-07 16:16:42 DimitrisCSD

Вы можете использовать Flexbox:

<div style="width:1000px; display: flex; justify-content: space-between"> 
    <div style="width:200px; height:100px; background-color:black"></div> 
    <div style="width:200px; height:100px; background-color:red"></div>  
    <div style="width:200px; height:100px; background-color:blue">

Complete tutorial here

источник

2016-12-07 16:20:04

Равномерное горизонтальное выравнивание трех divs

ответ

Смежные вопросы