Question

我想在里面制作带有文字的两列。根据文本框的位置，文本框会增加宽度，但高度必须相同。

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

<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

使用display：flex;在下面的父元素示例

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

嗨因为你想念（＆＃34;）id =＆＃34; main＆＃34;下面的代码工作正常检查

<强> 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并排自动宽度

3 个答案: