與動態寬度在一起的兩個div

我正在嘗試使用搜索輸入和用戶的名稱相鄰。由於用戶名稱可能很長，搜索輸入必須改變其寬度（以及用戶名div）。像下面的圖片：與動態寬度在一起的兩個div

dynamic width

<div class="container"> 
    <div class="left" style="width: 80%">DYNAMIC WIDTH - search input</div> 
    <div class="right" style="width: 20%">SHORT NAME</div> 
</div>

codepen是here。

我在那裏手動設置寬度（80％和20％，或70％和30％），我希望它根據名稱的長度動態更改，並且div必須總和100％。

它看起來很簡單，但我想不出一個辦法。感謝您的幫助！

來源

2014-09-05 Lucas Garcia

我不明白你想實現什麼，不是很清楚了嗎？ – Haris 2014-09-05 17:44:14

也許你想要的是樣式'display：inline-block'？ – Kyojimaru 2014-09-05 17:45:12

對不起，哈利，我會編輯更清晰的問題。但是，正如你所看到的，我在那裏手動設置寬度（80％和20％），我希望它根據名稱的長度動態變化 – 2014-09-05 17:45:14

很容易將它們設置爲display: table-cell元素，因爲細胞調整寬度以適應父。

如果設置left div來width: 100%它總是會留下的剩餘空間被right格：

http://jsfiddle.net/fzmj5q2r/

.container { 
    display: table; 
    width: 100%; 
} 

.left { 
    display: table-cell; 
    width: 100%; 
    background: red; 
} 

.right { 
    display: table-cell; 
    background: green; 
    white-space: nowrap; 
}

來源

2014-09-05 18:01:12 LcSalazar

這就是我一直在尋找的，謝謝！ – 2014-09-05 18:17:38

如果文本在左邊部分太長，有沒有辦法使用省略號？ – 2016-08-08 21:53:24

您是否嘗試將邊距設置爲自動？像這樣：

<div style="margin-left:auto; margin-right: auto;">Sample Text</div>

來源

2014-09-05 17:46:49 killQuotes

It沒有工作...兩個div在一起（名稱和搜索輸入）必須總和爲100％。 – 2014-09-05 17:48:45

http://codepen.io/stephenbe/pen/KhDJw

我所做的只是有一個包裹，你輸入並命名......名字是在輸入文本

告訴我，如果這是一個有效的解決方案你

.name { 
    position:absolute; 
    right:0; 
    top:0; 
    height:100%; 
    background:red; 

    padding:20px; 
    vertical-align:middle; 

    box-sizing:border-box; 

}

來源

2014-09-05 18:00:38 Stephen

謝謝你的回答，斯蒂芬。但我不知道你是否意識到你的.name div已經超過了輸入。因此，如果我在輸入字段中放置一個長字符串，它將被紅色的.name div隱藏。 – 2014-09-05 18:08:57

是的，像表格單元解決方案更好！很高興你最終找到了你的答案:) – Stephen 2014-09-05 18:19:28

與動態寬度在一起的兩個div

回答

相關問題