Сделать правый div в контейнере отзывчивым

Question

У меня есть 2 divs в контейнере, один в центре и один справа. Я хочу, чтобы ширина правого div была отзывчивым. В настоящее время работает только max-width по центру.

См. Это jsFiddle.

Как я могу сделать правильный div отзывчивым?

HTML:

<div id="container"> 

    <div id="middle">Centered</div> 

    <div id="right">Make me responsive</div> 

</div> 

CSS:

#container { 
    width: 100%; 
    text-align: center; 
    position: relative; 
} 

#middle { 
    background: #ddd; 
    margin: 0 auto; 
    position: relative; 
    width: 100%; 
    max-width:300px; 
    height:300px; 
    display: inline-block; 
    vertical-align: top; 
} 

#right { 
    background:yellow; 
    width:100%; 
    max-width:300px; 
    display: inline-block; 
    vertical-align: top; 
    position: absolute; 
} 


@media screen and (max-width: 350px) { 
    #right { 
     display: none; 
    } 
} 

Answer 1

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

JSFiddle Demo

#container { 
 
    display: flex; 
 
} 
 
#container:before, #middle, #right { 
 
    border: 1px solid red; 
 
    flex: 1 1 0; 
 
} 
 
#container:before { 
 
    content:""; 
 
} 
 
#middle { 
 
    max-width: 100px; 
 
}

<div id="container"> 
 
    <div id="middle">Centered</div> 
 
    <div id="right">Responsive</div> 
 
</div>

Answer 2

Вы можете сделать то, что вы хотите делать что-то вроде этого: JSFiddle
Единственная проблема заключается в ваш средний ДИВ должен иметь фиксированную ширину, но используя медиа-запросы, о которых вы можете забыть. Имейте в виду, что calc browser support может быть лучше (хотя есть polyfills).

#middle { 
    position: relative; 
    margin: 0 auto; 
    height: 300px; 
    width: 340px; 
    background: #ddd; 
    text-align: center; 
} 

#right { 
    position: absolute; 
    top: 0; right: 0; 
    width: calc(50% - 170px); 
    background: red; 
} 

@media screen and (max-width: 340px) { 
    #middle { 
     width: auto; 
     max-width: 340px; 
    } 
    #right { 
     display: none; 
    } 
} 

ПЕРЕД EDIT

max-width не работает на элементах, где position устанавливается в absolute.

Что именно вы хотите сделать с absolute, а также, какой тип макета вы хотите получить в конце?

Answer 3

удалите максимальную ширину справа. Кроме того, вы должны установить процент меньше, чем на 100%, но полностью 100%, имеют смысл реагирующей дивы:

#container { 
 
    width: 100%; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
#middle { 
 
    background: #ddd; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    width: 80%; 
 
    max-width: 300px; 
 
    height: 300px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
#right { 
 
    background: yellow; 
 
    width: 20%; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    position: absolute; 
 
} 
 
@media screen and (max-width: 350px) { 
 
    #right { 
 
    display: none; 
 
    } 
 
    #middle { 
 
    width: 100%; 
 
    } 
 
}

<div id="container"> 
 

 
    <div id="middle">Centered</div> 
 

 
    <div id="right">Make me responsive</div> 
 

 
</div>