Question

我正在尝试为我的网站制作一种响应式标题。它应该以这种方式工作：流体div - 固定和居中 - 流体。所有三个cols都充满了内容。问题是中间列并不总是居中，流体的宽度不相等。

    <div class="header">
    <div class="fluid-col">
        1234
    </div>
    <div class="fixed-col">
        <h1><a href="#" title="">Orfin Studio</a></h1> 
    </div>
    <div class="fluid-col">        
123
    </div>
</div>

CSS

.header {
    display: table;
    width: 100%;
    height:120px;
    text-align:center;
}
.header > div {
    display: table-cell;
    vertical-align:middle;
}
.fixed-col {
    width:200px;
    color: white;
}
.fluid-col {
background:pink; 
}

为什么会这样？; /谢谢！

Answer 1

我不确定你想要的但是试试这个： FIDDLE

<div class="header container">

    <div class="col col-1">
       COL 1
    </div>
    <div class="col col-2 custom-width">
      COL 2
    </div>
    <div class="col col-3">
      COL 3
    </div>

</div>

css：

.header {
    display: table;
    width: 100%;
    height:120px;
    text-align:center;
}
.header > div {
    display: table-cell;
    vertical-align:middle;
}
.col {
    width:20%;
}

.custom-width {
    min-width:300px; // change the value as you want with width and min-width
    background:pink; 
}

Answer 2

http://jsfiddle.net/RzhDD/

HTML

<div id="header">
<div class="fluid-col twintypercent">
    Left Col
</div>

<div class="fluid-col sixtypercent">
    <div class="fixed-col">
        Centered Column
    </div>
</div>
<div class="fluid-col twintypercent">
    Right Col
</div>

CSS

#header {
width:100%;
}
.fluid-col {
    float:left;
}
.Tpercent {
    width:20%;
}
.sixtypercent {
    width:60%;
    text-align:center
}
.fixed-col {
    margin:auto;
    width:200px;
    text-align:left;
}

3列/ div - 两个流体，中间固定和居中

2 个答案: