浮動兩個div彼此相鄰

我想在右邊浮動兩個div彼此相鄰。最右邊的div有可變的文本，所以我想讓左邊的div繼續向左移動，但用可變數據粘在右邊的div上。當我做浮動：右邊的兩個div取代右邊的div。浮動兩個div彼此相鄰

<div class="wrap"> 
<div class ="left">static data<div> 
<div class ="right">variable data<div> 
<div class="wrap"> 

css 
.left{ 
    float:right; 
    width:69%; 
    display:block; 
    } 
.right{ 
    float:right; 
    width:28%; 
    display:block; 
} 
.wrap{ 
width:100%; 
}

右側和左側divs還有一些div，但沒有任何類別。我該如何處理這個問題。顯示時左邊的div接管右邊的div。

感謝，

來源

2013-10-01 ssD

您可能想要使用結束標籤。 – nullability

如果你將兩個元素浮在一邊，那麼源頭中列出的那個將是那邊最遠的那個......所以這意味着你的'left' div將在你的'right' div的右邊。 – Nightfirecat

我覺得你只是想交換的div。

的第一個孩子的div浮動一路的第二個右浮動的div被顯示的第一個

FIDDLE

<div class="wrap"> 
    <div class ="right">variable data</div> 
    <div class ="left">static data</div> 
</div>

CSS左邊的RHS

.left, .right{ 
    float:right; 
}

來源

2013-10-01 22:00:15 Danield

你可能想要觸發一個叫做塊格式上下文的東西。只需將合作伙伴的overflow屬性設置爲與默認值不同的值即可。如果您需要向後支持（即家庭），請使用zoom: 1;另外，請先放置浮動div。

.right { 
    width: 28%; 
    float: right; 
} 
.left { 
    overflow: auto; 
} 
.wrap{ 
    width:100%; 
} 

<div class="wrap"> 
    <div class ="right">variable data</div> 
    <div class ="left">static data</div> 
</div>

http://jsfiddle.net/GMwjQ/

已經有一個線程某處SO張貼了這個答案。找不到它。

來源

2013-10-01 22:09:23 Roger

我看不到'overflow：auto'在這個例子中做了什麼？對於浮動來說，爲了清除浮動的子元素，通常會將「overflow：auto」（或「hidden」）應用於父元素（即本例中的「.wrap」）。 – MrWhite

如果沒有交換HTML中的div，請將包裝器div浮動到右側並使子div內嵌塊。

css 
.wrap{ 
    float: right; 
} 
.left{ 
    width: 69%; 
    display: inline-block; 
    } 
.right{ 
    width: 28%; 
    display: inline-block; 
}

來源

2018-01-05 17:51:23

浮動兩個div彼此相鄰

回答

相關問題