CSS в центр div в пробеле справа

Question

Я изо всех сил пытаюсь создать действительно базовый макет с CSS. Я создал следующий jsFiddle, чтобы помочь объяснить (код скопирован ниже).

http://jsfiddle.net/drmrbrewer/10jq4zka/1/

В принципе, что я хочу для первого, второго и третьего дивы быть на одной строке, при этом первый и второй дивы расположены последовательно, как далеко влево, насколько это возможно, и для третий div должен быть центрирован в пространстве, которое остается справа от второго div. Строка должна заполняться на 100% горизонтально, так что, когда окно будет изменено, третий div останется центрированным в своем пространстве справа от второго div, в то время как первый и второй div остаются неподвижными.

#outer-container { 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 
#inner-container { 
 
    position: relative; 
 
    width: 400px; 
 
} 
 
#one { 
 
    width: 200px; 
 
    text-align: center; 
 
    float: left; 
 
} 
 
#two { 
 
    width: 200px; 
 
    text-align: center; 
 
    float: left; 
 
} 
 
#three { 
 
    width: 200px; 
 
    text-align: center; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

<div id="outer-container"> 
 
    <div id="inner-container"> 
 
    <div id="one">one</div> 
 
    <div id="two">two</div> 
 
    </div> 
 
    <div id="three">three</div> 
 
</div>

Answer 1

Я не знаю, почему вам нужно inner-container. Вы можете добиться того, что ищете, не используя inner-container (если html доступен для редактирования, конечно).

Позвольте мне объяснить это вместо того, чтобы просто дать код:

Вы можете плавать первые два div's слева. Это выровнят их рядом друг с другом. Затем вы можете добавить text-align: center на родителя, и это позаботится о выравнивании по центру третьего div.

Вы можете проверить ссылку JSFiddle http://jsfiddle.net/b5jk1d6k/, чтобы вы могли изменять размер и видеть, что третий div выровнен по центру при изменении размера окна браузера.

div { 
 
    display:inline-block; 
 
    height: 100px; 
 
    width: 50px; 
 
} 
 
div.outer-container { 
 
    display: block; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
.one { 
 
    background-color:orange; 
 
    float:left; 
 
} 
 
.two { 
 
    background-color:red; 
 
    float:left; 
 
} 
 
.three { 
 
    background-color:yellow; 
 
}

<div class="outer-container"> 
 
    <div class="one">One</div> 
 
    <div class="two">Two</div> 
 
    <div class="three">Three</div> 
 
</div>

Надеется, что это помогает !!!

Answer 2

Добавление к Ответу Satwik Nadkarny в, если вы знаете, что DIV 1 и 2 установлены на 200px вы можете установить 3 остающийся давая ширину DIV 3 тоже:

width: calc (100% - 400px); 

Который просто берет ширину окна браузера и вычитает ширину обоих разделов 1 и 2.

div { 
    display:inline-block; 
    height: 100px; 
    width: 50px; 
} 

div.outer-container { 
    display: block; 
    text-align: center; 
    width: 100%; 
} 

.one { 
    background-color:orange; 
    float:left; 
    width: 200px; 
} 
.two { 
    background-color:red; 
    float:left; 
    width: 200px; 
} 

.three { 
    background-color:yellow; 
    width: calc(100% - 400px); 
}