Div在中心具有特定的宽度，侧面必须与屏幕缩放 [英] Div in the center with specific width, sides must scale with screen

问题描述

我想尝试获得3个div，以适应另一个，两个div需要均匀地填充页面的其余部分：

 < div class =second_bar> 
< div class =status_border_left> 
< / div>< div class =nav_bar> 
< / div>< div class =status_border_right> 
< / div> 
< / div> 
  

我的CSS：

  .status_border_left {
 // width：100px; 
 height：14px; 
 background-color：yellow; 
} 
 .status_border_right {
 // width：100px; 
 height：14px; 
 background-color：yellow; 
} 
 .nav_bar {
 position：relative; 
 margin：0 auto; 
 height：80px; 
 width：980px; 
 background-color：green; 
} 
 .second_bar * {
 display：inline-block; 
 vertical-align：top; 
} 
 .second_bar {
 height：80px; 
 width：100％; 
} 
  

任何方式做我想要的而不涉及JavaScript？

解决方案

这里有一种使用 table c $ c> table-cell 。

你需要对你的左右子元素做一个小的修改，

$

b
$ b

 < div class =second_bar> 
< div class =status_border left> 
< div class =content>< / div> 
< / div> 
 
< div class =nav_bar>< / div> 
 
< div class =status_border right> 
< div class =content>< / div> 
< / div> 
< / div> 
  

和 CSS ：

  .second_bar {
 height：80px; 
 width：100％; 
 border：1px dotted blue; 
 display：table; 
} 
 .status_border {
 display：table-cell; 
 vertical-align：top; 
 width：auto; 
 background-color：yellow; 
} 
 .status_border .content {
 width：auto; 
 height：14px; 
 background-color：pink; 
} 
 .nav_bar {
 display：table-cell; 
 vertical-align：top; 
 height：80px; 
 width：980px; 
 min-width：980px; 
 background-color：green; 
} 
  

对于您的容器块 .second_bar ，将显示类型设置为表，宽度为100％。

子元素 .status_border 和 .nav_bar 有 display：table-cell code> vertical-align：top ，但您可以根据布局要求进行调整。

.nav_bar 子div的宽度为980像素，但因为它是一个表格单元格，如果窗口足够小，宽度可以缩小到小于980像素。如果需要，表格单元格将缩小以适合内容。要保持全宽，请将 min-width 设置为宽度。

指示条的高度为14px，您需要有一个单独的块元素与左和右子元素。

默认情况下，三个表-cell 块将采用三个表格单元格中最高的高度，在本例中为80px .nav_bar div。

如果将 .content 的宽度设置为自动，它将采用相同的宽度填充剩余的可用的页面宽度。

请注意，IE8不支持 table-cell ，否则，非常有用的模式。

请参阅demo fiddle： http： //jsfiddle.net/audetwebdesign/SyAAQ/

I'm trying get 3 div's to fit aside eachother, the two side divs need to fill the rest of the page equally:

    <div class="second_bar">
        <div class="status_border_left">
        </div><div class="nav_bar">
        </div><div class="status_border_right">
        </div>
    </div>

My CSS:

.status_border_left{
    //width:100px;
    height:14px;
    background-color:yellow;
}
.status_border_right{
    //width:100px;
    height:14px;
    background-color:yellow;
}
.nav_bar{
    position:relative;
    margin: 0 auto;
    height:80px;
    width:980px;
    background-color:green;
}
.second_bar *{
    display:inline-block;
    vertical-align:top;
}
.second_bar{
    height:80px;
    width:100%;
}

Any way to do what I want without involving JavaScript?

解决方案

Here is one way of doing it by using CSS display types of table and table-cell.

You need to make a small modification to your left and right child elements, simply define a wrapper .content div to enclose any content.

The HTML:

<div class="second_bar">
    <div class="status_border left">
        <div class="content"></div>
    </div>

    <div class="nav_bar"></div>

    <div class="status_border right">
        <div class="content"></div>
    </div>
</div>

and the CSS:

.second_bar {
    height:80px;
    width:100%;
    border: 1px dotted blue;
    display: table;
}
.status_border {
    display: table-cell;
    vertical-align: top;
    width: auto;
    background-color: yellow;
}
.status_border .content {
    width: auto;
    height: 14px;
    background-color: pink;
}
.nav_bar {
    display: table-cell;
    vertical-align: top;
    height: 80px;
    width: 980px;
    min-width: 980px;
    background-color: green;
}

For your container block .second_bar, set the display type to table and the width to 100%.

The child elements .status_border and .nav_bar have display: table-cell and vertical-align: top, but you may adjust that depending on your layout requirements.

The .nav_bar child div has a width of 980px, but because it is a table cell, the width could shrink to less than 980px if the window is small enough. Table cell's will shrink to fit the content if needed. To maintain the full width, set the min-width to the width.

To get your left and right status indicator bars to be 14px high, you need to have a separate block element with the left and right child elements.

By default, the three table-cell blocks will take the height of the tallest of the three table cells, in this case, the 80px .nav_bar div.

If you set .content's width to auto, it will both will take on the same width and fill up the rest of the available page width.

Note that table-cell is not supported in IE8, but otherwise, this is a pretty useful pattern.

See demo fiddle at: http://jsfiddle.net/audetwebdesign/SyAAQ/

这篇关于Div在中心具有特定的宽度，侧面必须与屏幕缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！