动态宽度并排（内联）div（CSS，无JavaScript）

Question

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

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

JSFiddle和代码片段：

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

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

现在，我使用width: calc(100% - 34px);不解决，当我添加/删除行号，使其格变动幅度的问题。

我试过CSS属性display中的多个值。我怀疑与表相关的东西会起作用，但我宁愿没有解决方法，如果可能的话，也不要JavaScript。

如果您还没有理解该问题，只需删除10和etc，您将在编辑器/文本div的末尾发现一个空白区域。的

Answer 1

您可以使用flexboxes：

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

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

Answer 2

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 3

，我做的自己使用浮动的线路（不使用BR的）

<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％的宽度：

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

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