三列布局侧列弹性中间固定 [英] Three Column Layout side columns elastic middle fixed

问题描述

我想知道如果有人知道如何有一个固定的宽度的中心的div和右和左div弹性在中心的div的任一侧。中心的div有一个最小宽度和最大宽度CSS属性aswell。

解决方案

尝试添加您尝试的代码

 <$ c $ 
 c>< div class =container> 
< div class =fluid> 
我是流动的
< / div> 
 
< div class =fixed> 
我修正了！ 
< / div> 
 
< div class =fluid> 
我是流动的
< / div> 
< / div> 
  

CSS

  html，body {
 height：100％; 
 font-family：'Arial'，'Helvetica'，Sans-Serif; 
} 
 .container {
 display：table; 
 width：100％; 
 height：100％; 
} 
 .container> div {
 display：table-cell; 
 text-align：center; 
} 
 .fixed {
 min-width：200px; max-width：300px; 
 background：rgb（34，177，77）; 
 color：white; 
} 
 .fluid {
 background：rgb（0，162，232）; 
} 
 
  

DEMO LINK

I was wondering if anyone knows how to have a fixed width of the centered div and have the right and left div elastic on either side of the centered div. The centered div has a min-width and max-width css properties aswell.

解决方案

Try to add the code what you tried when you post a question.

HTML

<div class = "container">
    <div class = "fluid">
        I am fluid
    </div>

    <div class = "fixed">
        I'm Fixed! 
    </div>

    <div class = "fluid">        
        I am fluid
    </div>
</div>

​ CSS

html, body {
    height: 100%;
    font-family: 'Arial', 'Helvetica', Sans-Serif;
}
.container {
    display: table;
    width: 100%;
    height: 100%;
}
.container > div {
    display: table-cell;
    text-align: center;
}
.fixed {
    min-width: 200px; max-width:300px;
    background: rgb(34, 177, 77);
    color: white;
}
.fluid {
    background: rgb(0, 162, 232);
}
​

DEMO LINK

这篇关于三列布局侧列弹性中间固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！