2016-09-13 4 views
0

Как выровнять два встроенных div, чтобы их смежные края были центрированными?Как я могу центрировать два div?

Так что я хотел бы, чтобы она выглядела так:

div1div1 div2div2 
     div1 div2 
div1div1div1 div2div2 

Я попытался с помощью встроенного блока, как, как показано ниже, но это просто центрирование каждой строки.

.container { 
 
    text-align: center; 
 
} 
 
.left-div { 
 
    display: inline-block; 
 
} 
 
.right-div { 
 
    display: inline-block; 
 
}
<div class="container"> 
 
    <div class="left-div">div1div1</div> 
 
    <div class="right-div">div2div2</div> 
 
</div> 
 
<div class="container"> 
 
    <div class="left-div">div1</div> 
 
    <div class="right-div">div2</div> 
 
</div> 
 
<div class="container"> 
 
    <div class="left-div">div1div1div1</div> 
 
    <div class="right-div">div2div2</div> 
 
</div>

ответ

1

https://jsfiddle.net/fkfmh7md/ изменить расстояние между дивами, изменением 5px в утеплителе: 0 5px любого другого значения

.container { 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
} 
 
.container div { 
 
    display: table-cell; 
 
    padding: 0 5px; 
 
} 
 
.container div.left { 
 
    text-align: right; 
 
}
<div class="container"> 
 
    <div class="left">div1div1</div> 
 
    <div>div2div2</div> 
 
</div> 
 
<div class="container"> 
 
    <div class="left">div1</div> 
 
    <div>div2</div> 
 
</div> 
 
<div class="container"> 
 
    <div class="left">div1div1div1</div> 
 
    <div>div2div2</div> 
 
</div>

+0

Но дивы слишком далеко Кроме. Есть ли способ контролировать расстояние между каждым div? – navig8tr

+1

@ navig8tr попробуйте изменить 'ширина: 45%' до 49% для левого и правого div – JapanGuy

+0

Да, это сделало трюк – navig8tr

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