并排（内联）div具有动态宽度（CSS，没有JavaScript）

Question

在标记[重复]之前，请务必理解问题。

我很难找到最好的方法来并排放置2个div，其中第一个div是动态的，可添加和删除的内容。检查实际代码解释的方式比我多。它基本上是一个编辑器，其中包含行计数器和代码/文本部分。

JSFiddle和代码段：

＆＃13;

＆＃13;

body, html {
  height: 100%;
  margin: 0px;
}

#editor {
  cursor: default;
  font-family: consolas;
  font-size: 12px;
  height: 100%;
  user-select: none;
}

#lines {
  background-color: #2e3436;
  color: #fff;
  display: inline-block;
  height: 100%;
  padding: 0 7px;
}

#text {
  background-color: #141414;
  color: #B5834A;
  cursor: text;
  display: inline-block;
  height: 100%;
  vertical-align: top;
  width: calc(100% - 34px);
}

＆＃13;

<div id="editor">
  <div id="lines">
    <span>1</span>
    <br><span>2</span>
    <br><span>10</span>
    <br><span>etc</span>
  </div><div id="text">
    <span>&lt;html><br>// Code<br>&lt;/html></span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

现在我正在使用width: calc(100% - 34px);，这不能解决我添加/删除使其div更改宽度的行号时的问题。

我在CSS属性display中尝试了多个值。我怀疑与表相关的东西会起作用，但如果可能的话，我宁愿不使用解决方法而不使用JavaScript。

如果您还没有理解这个问题，只需删除10和etc，您就会发现编辑/文本div末尾有一个空格。

Answer 1

float代替inline-block

body, html {
  height: 100%;
  margin: 0px;
}

#editor {
  cursor: default;
  font-family: consolas;
  font-size: 12px;
  height: 100%;
  user-select: none;
}

#lines {
  background-color: #2e3436;
  color: #fff;
  /*display: inline-block;  nooooo */
  float:left; /* yeeeeees */
  height: 100%;
  padding: 0 7px;
  text-align: right;  /* missing this :) */
}

#lines span{ display: block;} /* yeeeeyyy */

#text {
  background-color: #141414;
  color: #B5834A;
  cursor: text;
  /*display: inline-block; noooooo */
  /* width: calc(100% - 34px); noooooo */
  height: 100%;
  vertical-align: top;
}

<div id="editor">

  <div id="lines">
    <span>1</span>
    <span>2</span>
    <span>10</span>
    <span>etccccc</span>
  </div>
  
  <div id="text">
    <span>&lt;html><br>// Code<br>&lt;/html></span>
  </div>
  
</div>

Answer 2

您可以使用flexbox：

＆＃13;

＆＃13;

body, html {
  height: 100%;
  margin: 0px;
}

#editor {
  cursor: default;
  font-family: consolas;
  font-size: 12px;
  height: 100%;
  user-select: none;
  display: flex; /* add */
}

#lines {
  background-color: #2e3436;
  color: #fff;
  /*display: inline-block;*/
  height: 100%;
  padding: 0 7px;
}

#lines span {
  display: block; /*add and remove <br>s*/
}

#text {
  background-color: #141414;
  color: #B5834A;
  cursor: text;
  /*display: inline-block;*/
  height: 100%;
  /*vertical-align: top;*/
  width: 100%;
}

＆＃13;

<div id="editor">
  <div id="lines">
    <span>1</span>
    <span>2</span>
    <span>10</span>
    <span>etc</span>
  </div><div id="text">
    <span>&lt;html><br>// Code<br>&lt;/html></span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我自己使用浮动线（不使用br＆＃39;）

<div id="editor">
    <div id="lines">
        <span>1</span>
        <span>2</span>
        <span>10</span>
        <span>etc</span>
    </div>
    <div id="text">
        <span>&lt;html></span>
        <span>// Code</span>
        <span>&lt;/html></span>
    </div>
</div>

并显示表格属性以适应所有屏幕并获得更好的对齐。

继承人这个例子，对我很好：https://jsfiddle.net/wkd0ssw3/

这适用于任何导航器，请小心使用其他属性，例如display:flex或calc，因为可能无法在所有导航器中使用...

Answer 4

将.editor元素放在 .text元素中，使其成为浮动块并赋予.text元素100％宽度：

＆＃13;

＆＃13;

body, html {
  height: 100%;
  margin: 0px;
}

#editor {
  cursor: default;
  font-family: consolas;
  font-size: 12px;
  height: 100%;
  user-select: none;
}

#lines {
  background-color: #2e3436;
  color: #fff;
  float: left;
  display: block;
  height: 100%;
  padding: 0 7px;
}

#text {
  background-color: #141414;
  color: #B5834A;
  cursor: text;
  display: inline-block;
  height: 100%;
  vertical-align: top;
  width: 100%;
}

＆＃13;

<div id="editor">
 
  <div id="text">
   <div id="lines">
    <span>1</span>
    <br><span>2</span>
    <br><span>10000</span>
    <br><span>etc</span>
  </div>
    <span>&lt;html><br>// Code<br>&lt;/html></span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;