CSS - 两个Div并排自动调整宽度

问题描述：

我想让两列内有文字。根据它将更多的文本框将增加宽度，但高度必须相同。CSS - 两个Div并排自动调整宽度

这是我的代码，我不知道如何解决这个问题。

<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; 
}

答

使用显示：弯曲;关于你的主要下方

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/

答

我会尝试这个CSS，当我在你的小提琴中尝试它时工作：

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

.cell1 { 
    background:red; 
} 

.cell2 { 
    background:blue; 
}

答

嗨因为ü错过（ “）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>

CSS - 两个Div并排自动调整宽度

相关推荐