灵活的布局以适应浏览器宽度 [英] flexible layout to fit the browser width

问题描述

我有3列的布局。我需要左右div宽度在像素中固定，中间div应根据浏览器宽度进行扩展。

参考图像

灰色和红色div的宽度是固定的像素，因此这两个应始终左右浏览器和绿色div不应该有任何宽度，因为它应根据浏览器宽度扩展。

下面是我到目前为止尝试过的演示 http://jsfiddle.net/JvHZ7/

解决方案

您可以使用CSS表格。这里有一个演示：。基本大纲如下所示：HTML：

 < div class =container> 
< div class =fixed> 
我是150px宽！欢乐合唱团真棒！ 
< / div> 
< div class =fluid> 
我很流畅！欢乐合唱团真棒！ 
< / div> 
< div class =fixed> 
我是150px宽！欢乐合唱团真棒！ 
< / div> 
< / div> 
  

CSS：

  html，body {
 height：100％; 
} 
 .container {
 display：table; 
宽度：100％; 
身高：100％; 
} 
 .container> div {
 display：table-cell; 
} 
 .fixed {
 width：150px; / *或任何你想要的* / 
} 
 .fluid {
 / *是，没有* / 
} 
  

I have a layout of 3 columns. I need left and right divs width to be fixed in pixel and middle div should be extending based on the browser width.

Reference image

Grey and red divs width is fixed in pixels so that those two should be always right and left to the browser and green div shouldn't have any width because it should extend based on the browser width.

Here is the demo which i tried so far http://jsfiddle.net/JvHZ7/

解决方案

You can use CSS tables. Here's a demo: little link. The basic outline would look like this, HTML:

<div class = "container">
    <div class = "fixed">
        I'm 150px wide! Glee is awesome!
    </div>
    <div class = "fluid">
        I'm fluid! Glee is awesome!
    </div>
    <div class = "fixed">        
        I'm 150px wide! Glee is awesome!
    </div>
</div>

CSS:

html, body {
    height: 100%;
}
.container {
    display: table;
    width: 100%;
    height: 100%;
}
.container > div {
    display: table-cell;
}
.fixed {
    width: 150px; /*or whatever you want*/
}
.fluid {
    /*yep, nothing*/
}

这篇关于灵活的布局以适应浏览器宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！