使用CSS，如何在兩個浮動div之間堆疊兩個跨度？

在頁面的頂部，我有兩個div，一個浮動到左側，另一個浮到右側。我可以在文本之間放置邊框，但是現在我需要在它們之間堆疊兩個這樣的文本區域。使用CSS，如何在兩個浮動div之間堆疊兩個跨度？

這裏是說明我的問題一個小提琴：http://jsfiddle.net/TcRxp/

我需要的橙色框下的綠色方塊，與其他對準每個中心。「傳奇」（漂浮在右邊）曾經處於同一水平，但現在已經向下移動。

我試着添加另一張表，但沒有幫助。

打擾標記 - 這不是真正的光滑，我知道。有一些人隨着時間的推移觸及了這一點，我們都不是這個領域的專家。

是的，我已經遊說設計師加入到團隊中，但還沒有發生。

感謝，

保羅

來源

2011-06-08 Paul

我把它放在一起，許多不同的來源。亞歷克斯科爾斯的解決方案離蝙蝠最近，但中間並沒有居中。它比我的爛攤子還要乾淨得多。我開始與代碼this post：

<style type="text/css"> 
.leftit { 
    float: left; 
} 
.rightit { 
    float: right; 
} 
.centerit { 
    width: 30%; 
    margin-right: auto; 
    margin-left: auto; 
    text-align: center; 
} 
.centerpage { 
    width: 80%; 
    margin-right: auto; 
    margin-left: auto; 
} 
</style> 
</head> 
<body> 
<div class="centerpage"> 
<div class="leftit">Hello Left</div> 
<div class="rightit">Hello Right</div> 
<div class="centerit">Hello Middle</div> 
</div>

（fiddle for above）

我把亞歷克斯清理的元素就是讓我更接近我的目標，但該中心色塊是太寬。從this question我瞭解到「最大寬度」，最終成爲我需要的最後一部分......所以我想。

編輯：最大寬度不能在IE7怪癖模式下工作（我必須支持）所以從this page我學會了如何調整我的CSS以在IE7 quirks模式，IE8和FF中工作。

最後的代碼（fiddle）：

.leftit { 
    float: left; 
    font-size: 0.8em; 
} 
.rightit { 
    float: right; 
    font-size: 0.8em; 
} 
.centerit { 
    width:220px; 
    margin-right: auto; 
    margin-left: auto; 
    font-size: 0.8em; 
} 
#headmiddle div { 
    border: 1px solid #000; 
    margin-bottom: 3px; 
} 
.centerpage { 
    margin-right: auto; 
    margin-left: auto; 
    text-align: center; 
} 

strong { font-weight: bold; } 

.search { background: orange; } 
.active { background: #8ed200; } 

dt { float: left; font-weight: bold; } 
dd { margin-left: 4.5em; } 

<div class="centerpage"> 
    <div class="leftit">a little search form here</div> 
    <div class="rightit"> 
     <dl> 
      <dt>Legend:</dt> 
      <dd>Status numero uno</dd> 
      <dd>Status two</dd> 
     </dl> 
    </div> 
    <div class="centerit" id="headmiddle"> 
     <div class="active"><strong>Status:</strong> 
      Active</div> 
     <div class="search">Search results displayed</div> 
    </div> 
</div>

感謝所有偉大的答案 - 我從這個問題中學到了很多。

Paul

來源

2011-06-09 16:50:46 Paul

UPDATE：結合@Jeremy B的建議

是否必須通過CSS的變化？在處理這種情況時，您需要小心HTML元素的定義順序。

看看這裏的修改：http://jsfiddle.net/TcRxp/8/

我能夠acheive你需要什麼樣的改變三個的DIV的順序，並使用CSS suggesion從@Jeremy乙

本質上，邏輯爲佈局是

畫出浮子右內容
畫出浮子左側用內容
繪圖噸他的內容在中間（因爲它現在將渲染到浮動內容的右側。

來源

2011-06-08 18:10:05

Ha，山寨版！ +1進行我們的更改以使其正常工作。 – 2011-06-08 18:25:43

如果需要使用CSS來做到這一點，看看我的變化：Fiddle

我增加了以下內容：

#headmiddle span.status { display: block }

這將導致你的跨度上，以「堆棧」。

來源

2011-06-08 18:12:08

但是現在浮動右鍵的內容被按下了一條線 – 2011-06-08 18:15:08

首先讓你的頂部跨度塊元素堆疊起來：

<span class="color status active bold" style="display:block">狀態：</span>

則浮在中間的div左邊還有：

加浮動：左中#headmiddle您css

來源

2011-06-08 18:25:39 DShultz

我不得不修補一些，但這非常接近。只要我保持中間設置的邊距（並且不要將它們移除或更改爲自動），它的工作情況會非常好。我也刪除了固定的表格寬度。 http://jsfiddle.net/snyay/ – Paul 2011-06-09 14:34:05

當您將CSS和用於佈局的表格組合在一起時，獲得期望的結果始終難以實現。

我建議簡化您的HTML：

<div id="headleft">a little search form here</div> 
<div id="headmiddle"> 
    <div class="active"><strong>Status:</strong> Active</div> 
    <div class="search">Search results displayed</div> 
</div> 
<div id="headright"> 
    <dl> 
     <dt>Legend:</dt> 
     <dd>Status numero uno</dd> 
     <dd>Status two</dd> 
    </dl> 
</div>

和你的CSS：

div { padding: 2px; } 
strong { font-weight: bold; } 
#headleft { float: left; font-size: 0.8em; } 
#headmiddle { float: left; font-size: 0.8em; } 
#headmiddle div { border: 1px solid #000; margin-bottom: 3px; } 
.search { background: orange; } 
.active { background: #8ed200; } 
#headright { float: right; font-size: 0.8em; } 
dt { float: left; font-weight: bold; } 
dd { margin-left: 4.5em; }

結果是語義正確的HTML，更易於閱讀，因此更容易在未來修改。 Supporting fiddle。

來源

2011-06-08 18:42:16 Kalessin

謝謝，這是如此接近！我希望中間部分能夠被集中。這似乎很簡單...如果我沒有兩個堆疊的盒子。我可能不得不放棄這個想法，因爲它證明是如此痛苦。我試圖使這個例子適應你的代碼，但它工作可怕:) http://jsfiddle.net/m4pZz/ – Paul 2011-06-09 14:26:13

是的，這很棘手。我在http://jsfiddle.net/TcRxp/25/上更新瞭解決方案，但是您應該知道它在IE7及更舊版本中不起作用。 – Kalessin 2011-06-09 16:59:00

使用CSS，如何在兩個浮動div之間堆疊兩個跨度？

回答

相關問題