Question

我正在为我编写的一些VBA代码编写一些文档，并且我正在尝试添加注释以添加注释。在过去，我总是把它们放到右边，但是现在我需要评论连续的线条，并不总是有足够的空间来评论一条线。结果是评论最终水平交错，以适应他们。

我想要做的就是让选项卡叠加并使其旁边的文字浮动，以便腾出一点空间。

可以吗？我的HTML / CSS技能有点生疏，从4.01天开始......

编辑：没有太多代码要展示 - 到目前为止我只有这个：

.boxcomment {
  width: 25%;
  float: right;
  clear: both;
}

成功堆叠了输出框，但它们最终与相关代码行不对齐。

编辑：以下是对齐问题的示例：

HTML

<!doctype html>
<html>
<head>
  <title>Calculator Documentation</title>
  <link rel="stylesheet" type="text/css" href="default.css">
</head>

<body>

<!-- Header -->

<!-- Navigation -->

<!-- Content -->

<div style="width:40%;">

<div class="boxcomment">Comment is way too long Comment is way too long Comment is way too long Comment is way too long </div>
<pre>Some random code and some more code</pre>
<div class="boxcomment">Another comment</div>
<pre>More code</pre>

</div>

<!-- Footer -->

</body>

</html>

CSS

.boxcomment {
  width: 25%;
  float: right;
  clear: both;
  border: 1px #000;
  background-color: silver;
  margin: 10px;
}

这给出了这个结果，其中第二个注释与它所附带的段落不一致。（彩色线条表示它们应该排成一行的位置。）

这会使问题更清楚吗？它有点模糊，我知道......

编辑：按要求扩展HTML以包含整个代码。

Answer 1

使用许可：

9.5.2 Controlling flow next to floats: the 'clear' property

此属性指示元素框的哪些边可能不是   毗邻较早的浮箱。

除'none'以外的值可能会引入许可。净空   抑制边缘坍塌，并作为间隔上方的间距   一个元素。它用于将元素垂直推过浮动。

像这样：

clear: right;

.boxcomment {
  width: 25%;
  float: right;
  clear: right;
  border: 1px #000;
  background-color: silver;
  margin: 10px;
}
pre::after {
  content: '';
  display: block;
  clear: right;
}

<div class="boxcomment">Comment is way too long Comment is way too long Comment is way too long Comment is way too long </div>
<pre>Some random code and some more code</pre>
<div class="boxcomment">Another comment</div>
<pre>More code</pre>

如何在css中格式化boxouts

1 个答案: