CSS兩個div用於文本，一個主人，一個奴隸

Question

我想創建兩個div，彼此相鄰，一個左邊，一個右邊，並且兩個div都包含文本。

左邊的文本應該佔用儘可能多的空間，以便文本保留在一行上。

正確的人應該採取餘下的空間，獨立於文本的大小。

Answer 1

一些google搜索後，並使小修改我認爲以下幾點能夠很好地解決您的問題。另請參閱下面的代碼片段。

HTML

<ul> 
    <li> 
    <div class="left">some text</div> 
    <div class="right">This is a very big text which is supposed to behave as wanted</div> 
    </li> 
    <li> 
    <div class="left">a bit longer one</div> 
    <div class="right">And a long last line to make sure that everything is fine with no side effects</div> 
    </li> 
</ul> 

CSS

ul { 
    display: table; 
    width: 100%; 
} 

li { 
    display: table-row; 
} 

li div { 
    display: table-cell; 
} 

.left { 
    width: 1px; 
    background-color: blue; 
    color: white; 
    white-space: nowrap; 
} 

.right { 
    background-color: gray; 
} 

http://jsfiddle.net/cj6PR/71/

Answer 2

像這樣的事：

<div id="container"> 
    <div id="left_div"> 

    </div> 
    <div id="right_div"> 

    </div> 
</div> 

而且你的CSS：

#container { 
    position: absolute; 
    top: 0; 
    right: 0; 
    left: 0; 
    bottom: 0; 
} 

#left_div { 
    position: absolute; 
    top: 0; 
    right: 50%; 
    left: 0; 
    bottom: 0; 
    background-color:#EEE; 
    text-align:center; 
    border-right: 2px solid black; 
} 

#right_div { 
    position: absolute; 
    top: 0; 
    right: 0; 
    left: 50%; 
    bottom: 0; 
    background-color:#f9f9f9; 
    text-align:center; 
    color:#FFFFFF; 
} 

你正在尋找可能與一些jQuery插件，甚至香草JS，但我要實現的功能空間米不太確定我明白你想要做什麼。

Answer 3

我不知道你在尋找，但希望它可以幫助你：jsfiddle

HTML

<div class="container"> 
    <div class="left_div"> 
    It's my text, It's my text, It's my text, It's my text, It's my text, It's my text, It's my text, It's my text, It's my text, It's my text 
    </div> 
    <div class="right_div"> 
    More, more, more text, More, more, more text, More, more, more text 
    </div> 
</div> 

CSS

.container { 
    display: inline-flex; 
} 
.left_div { 
    float: left; 
    padding: 5px; 
} 
.right_div { 
    float: right; 
    padding: 5px; 
}