中心柱响应

我试图做他们这里做过的事：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的填充第e中心。这里是我的小提琴： http://jsfiddle.net/zbk6L/

来源

2014-01-09 user2430227

不大，试图让文本区域，以填补所有的空间的中间，有点像这样：http://jsfiddle.net/zbk6L/2/ – user2430227

我可以在JS中这样做，但我认为有一个更好的方式在CSS中做，这将是很好，顺利。 – user2430227

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

来源

2014-01-09 05:10:58

你的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

来源

2014-01-09 05:07:24

谢谢你的回答！ – user2430227

我建议采取这样一个完全不同的方法：(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，但这是一个最佳解决方案，因为它适用于不同维度的元素。您不必担心会崩溃内容，因为不使用浮动元素，也不会更改框模型。

来源

2014-01-09 05:09:45

这正是我尝试这样做的方式！ – user2430227

我会用花车。

.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:1px solid black;

http://jsfiddle.net/YYnXt/

来源

2014-01-09 05:11:49

回答

相关问题