float 属性和扩展元素

Question

我有两个div元素，每个元素都有一个id，lineNumber和code。
lineNumber 是可扩展的，code 具有 contenteditable 属性。
此外，我已将 float 应用于 lineNumber 元素。
问题是当将鼠标光标放在 code 元素上写东西时，我发现写光标嵌套在 lineNumber 元素中。

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  background-color: #333;
  font-size: 14px;
}

#container {
  padding: 0px;
}

#editor {
  width: 90%;
  height: 600px;
  margin: 30px auto;
  background-color: #fff;
}

#lineNumber {
  height: 98.7%;
  float: left;
  margin: 0;
  padding: 4px;
  text-align: center;
  font: 14px Tahoma, Arial, Helvetica, sans-serif;
  background-color: #555;
}

#code {
  width: 100%;
  height: 98.7%;
  margin: 0;
  padding: 4px;
  border-right: 3px solid #222;
  border-bottom: 3px solid #222;
  outline: 0;
  font: 14px Tahoma, Arial, Helvetica, sans-serif;
  background-color: #ccc;
}

<div id="container">
  <div id="editor">
    <!-- The next element is extendable (horizontally) //-->
    <div id="lineNumber"> 1 </div>
    <pre id="code" contenteditable="true"></pre>
    <div style="clear:both;"></div>
  </div>
</div>

Answer 1

我在#code id 上留了边距。好像修好了。

不过这个项目真的很酷，我喜欢它。

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  background-color: #333;
  font-size: 14px;
}

#container {
  padding: 0px;
}

#editor {
  width: 90%;
  height: 600px;
  margin: 30px auto;
  background-color: #fff;
}

#lineNumber {
  height: 98.7%;
  float: left;
  margin: 0;
  padding: 4px;
  text-align: center;
  font: 14px Tahoma, Arial, Helvetica, sans-serif;
  background-color: #555;
}

#code {
  width: 100%;
  height: 98.7%;
  margin: 0;
  padding: 4px;
  border-right: 3px solid #222;
  border-bottom: 3px solid #222;
  outline: 0;
  font: 14px Tahoma, Arial, Helvetica, sans-serif;
  background-color: #ccc;
  margin-left: 1em;
}

<div id="container">
  <div id="editor">
    <!-- The next element is extendable (horizontally) //-->
    <div id="lineNumber"> 1 </div>
    <pre id="code" contenteditable="true"></pre>
    <div style="clear:both;"></div>
  </div>
</div>

Answer 2

发生这种情况是因为 #code 不是 浮动的 而其前面的元素 (#lineNumber) 是浮动的.

您可以使用 table 布局 ，方法是将 display: table 赋给 #editor 和 display: table-cell 以及 vertical-align: top 到 #lineNumber 和 #code - 请参阅下面的演示：

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  background-color: #333;
  font-size: 14px;
}

#container {
  padding: 0px;
}

#editor {
  width: 90%;
  height: 600px;
  margin: 30px auto;
  background-color: #fff;
  display: table; /*ADDED THIS*/
  vertical-align: top; /*ADDED THIS*/
}

#lineNumber {
  height: 98.7%;
  /*float: left;*/
  display: table-cell; /*ADDED THIS*/
  vertical-align: top; /*ADDED THIS*/
  margin: 0;
  padding: 4px;
  text-align: center;
  font: 14px Tahoma, Arial, Helvetica, sans-serif;
  background-color: #555;
}

#code {
  display: table-cell; /*ADDED THIS*/
  width: 100%;
  height: 98.7%;
  margin: 0;
  padding: 4px;
  border-right: 3px solid #222;
  border-bottom: 3px solid #222;
  outline: 0;
  font: 14px Tahoma, Arial, Helvetica, sans-serif;
  background-color: #ccc;
}

<div id="container">
  <div id="editor">
    <!-- The next element is extendable (horizontally) //-->
    <div id="lineNumber"> 1 </div>
    <pre id="code" contenteditable="true"></pre>
    <div style="clear:both;"></div>
  </div>
</div>

Answer 3

您可以使用一些简单的方法 javascript 来设置页边距的宽度。如果这似乎无法响应地工作，您将需要一个事件监听器来观察 lineNumber 调整大小。

<script>
var width = document.getElementById('lineNumber').offsetWidth;

document.getElementById("code").style.margin = width + 'px';
</script>

如果你想让它换行试试这个！
将您的 pre 更改为 div 元素，并添加

word-wrap: break-word;

对应CSS。

Answer 4

在您的 #code 规则中，删除 width:100%（即让它成为 auto 宽度）并添加 overflow:auto 以使 #code 元素成为块格式上下文。这将使整个块在浮动元素之后开始，而不仅仅是它包含的行框。

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  background-color: #333;
  font-size: 14px;
}

#container {
  padding: 0px;
}

#editor {
  width: 90%;
  height: 600px;
  margin: 30px auto;
  background-color: #fff;
}

#lineNumber {
  height: 98.7%;
  float: left;
  margin: 0;
  padding: 4px;
  text-align: center;
  font: 14px Tahoma, Arial, Helvetica, sans-serif;
  background-color: #555;
}

#code {
  height: 98.7%;
  margin: 0;
  padding: 4px;
  border-right: 3px solid #222;
  border-bottom: 3px solid #222;
  outline: 0;
  font: 14px Tahoma, Arial, Helvetica, sans-serif;
  background-color: #ccc;
  overflow:auto;
}

<div id="container">
  <div id="editor">
    <!-- The next element is extendable (horizontally) //-->
    <div id="lineNumber"> 100 </div>
    <pre id="code" contenteditable="true"></pre>
    <div style="clear:both;"></div>
  </div>
</div>

float 属性和扩展元素

The float property and expanding the elements

html

css

css-float

float 属性 和扩展元素

The float property and expanding the elements

html

css

css-float

float 属性和扩展元素