Таблицы как расположение в поперечном браузере адаптивного дизайна

Question

В вебе-странице я следующий код для моего макета

<div class="parent"> 
     <div class="left-content"></div> 
     <div class="right-content"></div> 
</div> 

и стилей для данной разметки является:

.parent{ 
    display:table; 
    width:100%; 
} 
.parent > .left-content{ 
    width:auto; 
} 
.parent > .right-content{ 
    width:320px; 
} 

Как сделать " right-content "занимают 320px доступной ширины, а div с левым содержимым занимают всю оставшуюся ширину?

Отметьте, что: Я не могу использовать следующую технику для достижения такого поведения, поскольку мой макет реагирует, и мне нужно переместить «правильное содержание» в конец «левого содержимого» при определенном разрешении.

наценки:

<div class="parent"> 
    <div class="right-content"></div>   
    <div class="left-content"></div> 
</div> 

Стили

.parent{ 
    display:block; 
    width:100%; 
} 
.parent > .left-content{ 
    width:auto; 
} 
.parent > .right-content{ 
    width:320px; 
    float:right; 
} 

Answer 1

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

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

Далее, потому что ваш первый DIV является тот, который занимает оставшуюся ширину, простое решение представляется display:table-cell (и родитель, как display:table). Он выглядит выполнимым с встроенными блоками или поплавками, но вам, возможно, придется прибегнуть к чему-то вроде width: calc(100% - 320px);, так что мне нравится решение таблицы немного больше.

Затем вы добавляете простой медиа-запрос, чтобы вернуться к блокам с более низким разрешением.

.parent { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.parent > .left-content { 
 
    display: table-cell; 
 
    width: auto;   
 

 
    /* Added for visualisation */ 
 
    background: blue; 
 
    height: 50px; 
 
} 
 

 
.parent > .right-content { 
 
    display: table-cell; 
 
    width: 320px; 
 

 
    /* Added for visualisation */ 
 
    height: 50px; 
 
    background: red; 
 
} 
 
    
 
/* Media query */ 
 
@media(max-width: 550px) { 
 
.parent > .left-content { 
 
    display: block; 
 
} 
 
.parent > .right-content { 
 
    display: block; 
 
    width: 100%; 
 
} 
 
}

<div class="parent"> 
 
    <div class="left-content">Left</div> 
 
    <div class="right-content">Right</div> 
 
</div>

Answer 2

Я настоятельно рекомендую использовать calc вместо того, чтобы заставлять разметку вести себя как таблица.

http://sassmeister.com/gist/c87585fcff7fae356adb

.left-content, 
.right-content { 
    width: 100%; 
} 

@media (min-width: 600px) { 

    .left-content { 
    float: left; 
    width: calc(100% - 320px); 
    } 

    .right-content { 
    float: right; 
    width: 320px; 
    } 
}