Простой ДИВ диспозиция вопрос

Question

Простой вопрос: У меня есть две дивы, я хочу их бок о бок, как это:

.details-left { 
 
    background: yellow; 
 
    float: left; 
 
    width: 50%; 
 
} 
 

 
.details-right { 
 
    background: silver; 
 
    width: 50%; 
 
    float: left; 
 
}

<div class="details-left">left</div> 
 
<div class="details-right">right</div>

Вопрос заключается в том, могу ли я иметь тот же эффект используя float только в одном, если divs? Конкретная проблема заключается в том, что желтый div может содержать float: left, серебряный div не может. Я хочу добиться такого же эффекта, не используя float на серебряном div.

Как я могу это достичь?

Here's a fiddle

Answer 1

Использование display:inline-block добиться того, что вы хотите.

.details-left { 
 
    background: yellow; 
 
    float: left; 
 
    width: 50%; 
 
} 
 

 
.details-right { 
 
    background: silver; 
 
    width: 50%; 
 
    display:inline-block; 
 
}

<div class="details-left">left</div> 
 
<div class="details-right">right</div>

UPDATED FIDDLE

Answer 2

Вы можете использовать display: inline-block для серебра DIV

http://jsfiddle.net/94Lxd5c4/

.details-right { 
    background: silver; 
    width: 50%; 
    display: inline-block; 
} 

---

Или вы можете просто определить overflow: hidden; или overflow: auto;. Поведение серебра DIV будет то же самое, вы добавляете ли float: left или нет (он не будет делать никакой разницы)

http://jsfiddle.net/ogwvjjs9/2/

.details-right { 
    background: silver; 
    width: 50%; 
    overflow: auto; 
} 

Answer 3

.details-left { 
 
    background: yellow; 
 
    float: left; 
 
    width: 50%; 
 
} 
 

 
.details-right { 
 
    background: silver; 
 
    width: 50%; 
 
    position : absolute; 
 
    left : 50%; 
 
}

<div class="details-left">left</div> 
 
<div class="details-right">right</div>

Я надеюсь, что это является тем, что вы ищете

Answer 4

Использование display:table и display:table-cell для достижения ваших потребностей.

Я добавил еще один DIV, который будет выступать в качестве таблицы

< DIV CLASS = "деталь">

Ниже сОн действует как ячейка таблицы

< div class = "details-left"> left </div>

< Div класс = "данные-право"> право </DIV>

<div class="details"> 
<div class="details-left">left</div> 
<div class="details-right">right</div> 
</div> 

HTML

.details { display:table; width:100%; overflow:hidden;} 
.details-left { 
    background: yellow; 
    display:table-cell; 
    width: 50%; 
} 

.details-right { 
    background: silver; 
    width: 50%; 
    display:table-cell; 
} 

CSS

демо: http://jsfiddle.net/ravinthranath/skuvnvqL/