使可變寬度的兩個div相鄰，並在同一時間

-1

我被困在一個相當棘手的問題CSS居中。這是一個我們的網頁橫幅目前的樣子：使可變寬度的兩個div相鄰，並在同一時間

這裏是相關的HTML代碼：

<div style="width: 50%; overflow: hidden; margin: 0 auto; line-height: 40px"> 
    <div style="float: right"> 
     <i class="glyphicon project-switcher glyphicon-chevron-down"></i> 
    </div> 
    <div> 
     <h4 style="white-space: nowrap; overflow:hidden; 
        text-overflow: ellipsis">Some Project Title</h4> 
    </div> 
</div>

正如你所看到的，有項目名稱之間的空間下拉菜單glyphicon，看起來像是一個向下的白色小箭頭。

我們所希望實現的是有緊鄰glyphicon該項目冠軍，但也有標題和glyphicon自己在屏幕的中間居中。像這樣的東西就是我們想要的：

我已經在SO關於使固定與其他靈活的DIV讀一些職位在這裏，但我無法找到一個方法來應用到本案。其實，我甚至都不知道如何制定解決這個問題的辦法，這就是我尋求幫助的原因。

來源

2017-02-23 Tim Biegeleisen

您應該使用* Flexbox的*蒂姆。 –

有看看下面片斷

<div style="width: 50%; overflow: hidden; margin: 0 auto; line-height: 40px; text-align:center; border:1px solid #000"> 
 
    
 
    <div style=" display: inline-block; vertical-align: middle; max-width:90%"> 
 
     <h4 style="white-space: nowrap; overflow:hidden; 
 
        text-overflow: ellipsis;">Some Project TSome Project TSome Project TSome Project TSome Project TSome Project TSome Project TSome Project TSome Project T</h4> 
 
    </div> 
 
    <div style="display: inline-block; vertical-align: middle;"> 
 
     <i class="glyphicon project-switcher glyphicon-chevron-down">i</i> 
 
    </div> 
 
</div>

來源

2017-02-23 04:21:31 aje

這似乎在桌面上工作，但在移動測試時沒有工作，而且這樣可以防止省略號的工作。 –

你能告訴我在移動設備上輸出，還非要給固定的寬度爲'h4'使省略號工作 – aje

這是使用''

可以有可變寬度的要求之一，因爲我們不知道多久標題可能是。我們希望標題佔用所有可用空間，除了字形。 –

嘗試這樣，它可能工作...

 <div style="width: 50%; overflow: hidden; margin: 0 auto; line-height: 40px"> 


     <h4 style="white-space: nowrap; overflow:hidden; 
        text-overflow: ellipsis">Some Project Title <i class="glyphicon project-switcher glyphicon-chevron-down"></i></h4> 

</div>

來源

2017-02-23 04:26:20

display: flex; justify-content: center;將圍繞在中間的2個元素（居中水平）。並且align-items: center將垂直居中。

然後，您可以在子節點上使用order重新排列元素，使字形位於右側，即使它位於標記中的h4之前。或者你可以重新安排HTML中的這兩個元素。

<div style="width: 50%; overflow: hidden; margin: 0 auto; line-height: 40px; display: flex; align-items: center; justify-content: center;"> 
 
    <div style="order: 1;"> 
 
    <i class="glyphicon project-switcher glyphicon-chevron-down">(glyph)</i> 
 
    </div> 
 
    <div> 
 
    <h4 style="white-space: nowrap; overflow:hidden; text-overflow: ellipsis">Some Project Title</h4> 
 
    </div> 
 
</div>

來源

2017-02-23 04:26:57

喜邁克爾，這個工作在桌面模式下（和它在你的演示明顯作品），但對移動視圖的問題。具體來說，標題和字形在移動視圖中被截斷。 –

@TimBiegeleisen你還需要幫助嗎？看起來你已經接受了一個答案。 –

對方回答爲我工作，但感謝張貼。事情是，我有一個移動視圖。 –

使可變寬度的兩個div相鄰，並在同一時間

回答

可以有可變寬度的要求之一，因爲我們不知道多久標題可能是。我們希望標題佔用所有可用空間，除了字形。 –

相關問題