CSS - 兩個Div並排自動調整寬度

Question

我想讓兩列內有文字。根據它將更多的文本框將增加寬度，但高度必須相同。

這是我的代碼，我不知道如何解決這個問題。

https://jsfiddle.net/x0qqtr2y/

<div id="main> 
    <div class="cell1">SomeTEXTSomeTEXTSomeTEXTSomeTEXT</div> 
    <div class="cell2">SomeTEXTSomeTEXT</div> 
</div> 

#main { 
    width:100%; 
    background:gray; 
    display:table; 
    position:relative; 
} 
.cell1 { 
    width:auto; 
    height:auto; 
    display:table-cell; 
    background:red; 
    float:left; 
} 

.cell2 { 
    width:auto; 
    height:auto; 
    display:table-cell; 
    float:left; 
    background:blue; 
} 

Answer 1

使用顯示：彎曲;關於你的主要下方

CSS

#main { 
width:100%; 
display:flex; 
} 
.cell1 { 
    background:red; 
} 

.cell2 { 
    background:blue; 
} 

HTML父元素例如確保您關閉引號

<div id="main"> 
    <div class="cell1">SomeTEXTSomeTEXTSomeTEXTSomeTEXT</div> 
    <div class="cell2">SomeTEXTSomeTEXT</div> 
</div> 

要了解更多關於Flex使用鏈接： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

我會嘗試這個CSS，當我在你的小提琴中嘗試它時工作：

#main { 
    width:100%; 
    background:gray; 
    position:relative; 
} 
#main div { 
    display: inline; 
} 

.cell1 { 
    background:red; 
} 

.cell2 { 
    background:blue; 
} 

Answer 3

嗨因爲ü錯過（ 「）ID =」 主」下面的代碼工作正常，檢查

CSS

#main { 
width:100%; 
background:gray; 
} 
.cell1 { 
background:blue; 
float:left; 
} 
.cell2 { 

float:left; 
background:red; 
} 

的Html

<div id="main"> 
<div class="cell1">SomeTEXTSomeTEXTSome</div> 
<div class="cell2">SomeTEXTSomeTEXT1</div> 
</div>