Css стол с масштабируемым div по бокам

У меня есть центральный div, у которого еще 4 divs arrount it (сверху, вправо, влево, снизу).Css стол с масштабируемым div по бокам

Top и Нижняя часть Дивы, как утверждается, исправлены. Им не нужно увеличивать ни высоты, ни ширины.

правой и оставили дивы ТОЛЬКО suposed увеличить его ширину.

Как?

«content» div (central) - это таблица, которая может иметь столько строк, сколько захочет пользователь. Затем я хочу увеличить или уменьшить высоту слева и справа divs в зависимости от высоты «содержимого».

Я хочу автоматически сделать это.

Как я могу это сделать?

Я создал пример с тем, что я сделал, без успеха.

https://jsfiddle.net/y6ad2crg/4/

<div class="pantalla"> 
    <div class=" pantallaSup"></div> 

     <div class="pantallaEsq"></div> 
     <div class="pantallaDre"></div> 

     <div class="interiorPantalla"> 
      content<br> 
      aaa<br> 
      bbb<br> 
      ccc<br> 
      ddd<br> 
      eee 
     </div> 
     <div class="pantallaInf"></div> 
</div>

В результате я хочу получить, что:

Что я делаю неправильно?

Может просто изменить мелочи в CSS это может быть сделано, или, может быть, мой HTML неправильно разработан ...

источник

2016-07-26 Jordi 45454

ну, это не предпочтительный способ дизайна сайта, потому что вы используете абсолютные единицы по всему месту –

@MarkoMackic Я знаю, что вместо абсолютных единиц я должен использовать%, но я точно не знаю, как его изменить , Если я использую%, он станет отзывчивым, и я не хочу этого. –

изменить код у https://jsfiddle.net/p7haf3oo/

.pantalla { 
 
    /*position: relative;*/ 
 
    display: block; 
 
    width: 690px; 
 
    background-color: gray; 
 
} 
 

 
.pantallaSup { 
 
    height: 200px; 
 
    width: 100%; 
 
    background: orange; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
    align-items: stretch; 
 
} 
 

 
.pantallaEsq { 
 
    width: 69.4px; 
 
    border-right: 4px solid black; 
 
    background: red; 
 
    display: block; 
 
} 
 

 
.pantallaDre { 
 
    width: 69.4px; 
 
    border-left: 4px solid black; 
 
    background: red; 
 
    display: block; 
 
    align-self: stretch; 
 
    min-height: 100px; 
 
} 
 

 
.pantallaInf { 
 
    height: 200px; 
 
    width: 100%; 
 
    background: orange; 
 
} 
 

 
.interiorPantalla { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    border: 1px; 
 
    border-color: blue; 
 
    border-style: solid; 
 
    width: 550px; 
 
    background-color: white; 
 
}

<div class="pantalla"> 
 
    <div class="pantallaSup"></div> 
 
    <div class="flex"> 
 
    <div class="pantallaEsq"></div> 
 
    <div class="interiorPantalla"> 
 
     content 
 
     <br> aaa 
 
     <br> bbb 
 
     <br> ccc 
 
     <br> ddd 
 
     <br> eee 
 
    </div> 
 
    <div class="pantallaDre"></div> 
 
    </div> 
 
    <div class="pantallaInf"></div> 
 
</div>

источник

2016-07-26 19:31:49

Большое вам спасибо. Это то, что я искал. Как сказал @Marko Mackic, было бы сложно изменить абсолютные единицы на%? В любом случае, благодарю Вас. –

Я считаю, что я закодирован, что вы ищете - https://jsfiddle.net/Shuaso/vpmn3LLv/

Я удалил все ненужные div и используемые границы CSS и цвета фона для достижения такого же эффекта. Вы можете изменить контент в div «content» и увидеть динамические стили. Вот код:

CSS:

.container { 
    width: 500px; 
    background-color: orange; 
    padding: 20px 0; 
} 
.content { 
    border-left: 20px solid red; 
    border-right: 20px solid green; 
    background-color: white; 
}

HTML:

<div class="container"> 
    <div class="content"> 
    <p>test</p> 
    <p>test</p> 
    </div> 
</div>

источник

2016-07-26 19:28:22 Josh

Css стол с масштабируемым div по бокам

ответ

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