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）是浮动的。

您可以使用表格布局，将display: table提供给#editor，将display: table-cell和vertical-align: top提供给#lineNumber， #code - 请参阅下面的演示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用一些简单的javascript设置边距的宽度。如果这似乎没有响应，你需要一个eventlistener来调整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

在您的var message = (exception as DetailedException)?.DetailedMessage ?? exception.Message; 规则中，移除#code（即将其设为width:100%宽度）并添加auto以使#code元素成为块格式化上下文。这将使整个块在浮动元素之后开始，而不仅仅是其包含的行框。

＆＃13;

＆＃13;

overflow:auto

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;