中心柱響應

我試圖做他們這裏做過的事：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

回答

相關問題