Css表格與側面可縮放div

我有一箇中央div有4個其他divs arrount它（頂部，右側，左側，底部）。Css表格與側面可縮放div

頂部和底部 divs是固定的。他們不必增加高度和寬度。

右和左 divs只用於增加其寬度。

怎麼樣？

「content」div（central）是一個表格，它可以擁有用戶想要的行數。然後，我想根據「內容」的高度來增加或減少左側的高度和右側的格。

我想自動做到這一點。

我該怎麼做？

我已經創建了一個我所做過的例子，但沒有成功。

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我知道我應該使用％而不是絕對單位，但我不知道如何改變它。如果我使用％，它會變得反應迅速，我不想要它。 –

更改u代碼 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邊框和背景顏色來達到相同的效果。您可以更改「content」div中的內容並查看動態樣式。下面的代碼：

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

回答

相關問題