Question

我试图做他们在这里做的事情：Three Column DIV layout dynamics; left = fixed, center = fluid, right = fluid

它有点工作，但中心栏没有填满中心，我这样做：

HTML：

<div class="col1">
    <img src="http://placehold.it/30x30.jpg" />
</div>
<div class="col2">
    <textarea class="aTextArea"></textarea>
</div>
<div class="col3">
    <img src="http://placehold.it/30x30.jpg" />
</div>

CSS：

.col1{
    display:inline;
    float: left;
    border:1px solid black;
}
.col2{
    display:inline;
    float: none;
    border:1px solid black;
}
.col3{
    display:inline;
    float: right;
    border:1px solid black;
}
.aTextArea{
    margin:0px;
    padding:0px;
}

期望的效果是让中心的textarea填充中心。这是我的小提琴： http://jsfiddle.net/zbk6L/

Answer 1

你的css和html结构应该是这样的

<强> CSS

.col1{
    display:inline;
    float: left;
    border:1px solid black;
    width:100px;
}
.col2{
    float: none;
    border:1px solid black;
    margin:0 110px;
}
.col3{
    display:inline;
    float: right;
    border:1px solid black;
    width:100px;
}

<强> HTML

<div class="col1">
    <img src="http://placehold.it/30x30.jpg" />
</div>
<div class="col3">
    <img src="http://placehold.it/30x30.jpg" />
</div>
<div class="col2">
    <textarea class="aTextArea"></textarea>
</div>

<强> updated jsFiddle File

Answer 2

我建议采用一种完全不同的方法：(example here)

通过将父元素设置为display:table并将子元素设置为table-cell，您可以让中间列占据宽度100%并填充剩余空间。

#parent {
    display:table;
}
#parent > div {
    display:table-cell;
}
#parent > .col2, #parent > .col2 textarea {
    width: 100%;
}

尽管缺少support in IE7，但这是一个最佳解决方案，因为它适用于不同维度的元素。您也不必担心折叠内容，因为不使用浮动元素，也不更改框模型。

Answer 3

<强> Responsive and Perfect Solution

<强> CSS ：

.col1 {
    float: left;
    border: 1px solid black;
    width: 30px;
    box-sizing: border-box; /* It alters the default CSS box model used to calculate widths and heights of elements. */
}

.col2 {
    display: block;
    border: 1px solid black;
    box-sizing: border-box;
    margin: 0 30px;
}

.col3 {
    float: right;
    border: 1px solid black;
    width: 30px;
    box-sizing: border-box;
}

.aTextArea{
    margin: 0px;
    padding: 0px;
    display: block;
    width: 100%;
    box-sizing: border-box; /* New line added - Demo Updated */
    padding: 15px; /* New line added - Demo Updated*/
}

<强> HTML ：

<div style="overflow:hidden">

    <div class="col1">
        <img src="http://placehold.it/30x30.jpg" />
    </div>

    <div class="col3">
        <img src="http://placehold.it/30x30.jpg" />
    </div>    

    <div class="col2">
        <textarea class="aTextArea"></textarea>
    </div>

</div>

UPDATED DEMO

Answer 4

我会使用花车。

.col1, .col2, .col3 {
    float:left;
    margin:0;
    padding:0;
}
.col1{
width:20%;
}
.col2{
width:60%;
    text-align:center;
}
.col3{
width:20%;
text-align:right;
}
.aTextArea{
    margin:0px;
    padding:0px;
}

http://jsfiddle.net/fSK9c/

如果你真的想要你的边框，我建议使用Outline，因为border会打破布局。

outline:1px solid black;

http://jsfiddle.net/YYnXt/

中心栏响应

4 个答案: