HTML 3 divs - 左，中和右定位

我有3個div與未知（可變）寬度。我希望他們被定位在左邊，居中和右邊。我確實左轉，但與中心有問題。HTML 3 divs - 左，中和右定位

實例（我想）：

[[LEFT]       [CENTERED]        [RIGHT]]

但他們是：

[[LEFT][CENTERED]               [RIGHT]]

CSS：

#text_area_wrapper 
    { 
     text-align:center; 
     margin:0 auto; 
     display:inline-block; 
    } 
    #text_area 
    { 
     width:200px; 
     text-align:center; 
     margin:0 auto; 
    } 
    #text_area_left 
    { 
     float:left; 
     position:relative; 
     display:inline-block; 
     opacity:0.5; 
     filter: alpha(opacity=50); 
    } 
    #text_area_right 
    { 
     position:relative; 
     float:right; 
     display:inline-block; 
     opacity:0.5; 
     filter: alpha(opacity=50); 
    }

HTML：

<div id='text_area_row'> 
       <div id='text_area_left'>Left</div> 
       <div id='text_area_wrapper'> 
        <div id='text_area'> 
         CENTERED 
        </div> 
       </div> 
       <div id='text_area_right'>Right</div> 
    </div>

有什麼不對？

來源

2014-01-22 Tigran

見'flexbox'：他們的水平溢出隱藏的將清除任何先前的浮動元素，並填寫剩餘空間塊元素但目前你無法通過浮動來實現這一點。 –

你可以把你的中間<div>放在浮動的後面，然後設置給它的屬性overflow:hidden。

CSS

#text_area_left { 
    float:left; 
    opacity:0.5; 
    filter: alpha(opacity=50); 
} 

#text_area_wrapper { 
    overflow:hidden; 
    text-align:center; 
} 

#text_area_right { 
    float:right; 
    opacity:0.5; 
    filter: alpha(opacity=50); 
}

HTML

<div id='text_area_row'> 
    <div id='text_area_left'>Left</div> 
    <div id='text_area_right'>Right</div> 
    <div id='text_area_wrapper'> 
     <div id='text_area'>CENTERED</div> 
    </div> 
</div>

JSFiddle

來源

2014-01-22 16:09:49 George

可能是目前的最佳解決方案是源順序不是一個因素。 –

是否有可能以行寬爲中心居中，但沒有可用空間？我的右側和左側文字正在改變，中心元素跳轉。 – Tigran

我解決了這個問題，以固定的寬度製作div。 – Tigran

您應該將所有元素都浮動到左側，並根據頁面元素的寬度和頁面本身的寬度適當地設置頁邊距。

沒有浮子中心。您可以將居中元素的邊距設置爲邊距：0 auto;這將允許它在頁面上居中。

來源

2014-01-22 16:07:46

你不能使用'margin：auto' ...作爲浮點元素的中心....至少AFAIK。 :) –

Eesh，我在想什麼，出於某種原因，我認爲如果所有東西的寬度都沒有填滿屏幕，那麼中間的東西就不必浮動。蕩。 –

那麼，左右兩邊已經處於正確的位置。所以，爲了將其餘的中心，使用標籤。被警告，這有點麻煩，但通常工作正常。所以 <center> <div id='text_area_wrapper'> <div id='text_area'> Centered </div> </div>

來源

2014-01-22 16:09:15 DaMuffiner

'已被棄用且不再有效HTML –

有趣的..它適用於我所做的一切.. – DaMuffiner

HTML 3 divs - 左，中和右定位

回答

相關問題