CSS連續3個DIV：2修正1自動調整

我想弄清楚如何創建3個div並讓他們在同一行中排列。第一個和第三個固定寬度爲100px，第二個（中間）一個audo在瀏覽器調整大小的情況下調整其寬度。CSS連續3個DIV：2修正1自動調整

<div> 
    <div id="d1"> content 1</div> 
    <div id="d2"> content 2</div> 
    <div id="d3"> content 3</div> 
</div>

感謝，

來源

2010-03-03 Eatdoku

我*瘙癢*表明'<表式= '寬度：100％'>內容1內容2內容3'......但也許還有一種優雅的基於CSS的方式。我們拭目以待。 – 2010-03-03 23:55:54

有...見答案... :-) – AxelEckenberger 2010-03-03 23:59:28

~~http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm~~

罷工，許多額外的div，以確保所有列的高度相等。 This may be what you're looking for.這個優秀的文章中的所有解釋：http://www.alistapart.com/articles/holygrail

來源

2010-03-03 23:56:02 ghoppe

呃 - 爲什麼當表格完美工作時，你會做一堆帶有負邊距和填充的CSS黑客？不負責任的。 – Wells 2011-04-18 01:06:37

@Wells因爲使用表格進行佈局更加不負責任。表格是表格數據。 – ghoppe 2011-04-18 07:35:21

你有TP使用浮動對齊左右幀。但爲此，您必須重新排列div，如下所示，並設置中間div的邊距。

<style type="text/css"> 
#d1 { 
    float: left; 
} 

#d2 { 
    float: right; 
} 

#d3 { 
    margin-left: 100px; 
    margin-right: 100px; 
} 
</style> 

<div> 
    <div id="d1"> content 1</div> 
    <div id="d2"> content 2</div> 
    <div id="d3"> content 3</div> 
</div>

編輯

感謝Leniel Macaferi用於指出錯誤。 div的正確順序必須先浮動div，然後非浮動div s。因此我更正了代碼（交換了div d2和div d3）。

來源

2010-03-03 23:55:43 AxelEckenberger

不起作用：http://jsbin.com/ogigif/1/edit – 2013-04-30 21:10:47

@LenielMacaferi感謝您指出存在錯誤，現在更正的代碼作品... http://jsbin.com/evagat/1/edit – AxelEckenberger 2013-05-01 08:08:25

很好！ :) ... – 2013-05-01 19:47:39

NVM這是老了，我要去交什麼工作對我來說

<style type="text/css"> 
#d1 { 

    float: left; 
    margin-left: 50px; 

} 

#d2 { 
    float: center; 
    margin-right: 5px; 
} 

#d3 { 
float: left; 
margin-right: 5px; 
} 
</style> 

<div> 
    <div id="d1"> content 1</div> 
    <div id="d3"> content 3</div> 
    <div id="d2"> content 2</div> 
</div>

來源

2011-11-03 07:06:10

在CSS中沒有用於float的值'center'。（見http://www.w3schools.com/css/css_float.asp） – Rigganator 2014-12-05 18:05:49

事業部是一個塊級元素，所以它是一個不錯的選擇與處理其顯示屬性的幫助。

<div id="d1" style="display:inline-block; width:100px;">content1</div> 
<div id="d2" style="display:inline">content2</div> 
<div id="d3" style="display:inline-block; width:100px;">content3</div>

來源

2012-08-14 10:43:01 himanshupareek66

只是把這個在那裏作爲一個現代化的，乾淨的解決方案：使用calc。小提琴：http://jsfiddle.net/bg7KS/

#d2 { 
    width: 200px; /* fallback older browsers */ 
    width: -webkit-calc(100% - 200px); 
    width: -moz-calc(100% - 200px); 
    width: calc(100% - 200px); 
}

來源

2013-04-30 21:18:34

CSS連續3個DIV：2修正1自動調整

回答

相關問題