gpt4 book ai didi

css - 如何在 css 中格式化 boxouts

转载 作者:太空宇宙 更新时间:2023-11-04 02:06:03 25 4
gpt4 key购买 nike

我正在为我编写的一些 VBA 代码编写一些文档,并且我正在尝试为注释添加框框以添加注释。在过去,我总是将它们 float 到右边,但现在我需要注释连续的行,所以单行注释的空间并不总是足够的。结果是评论最终水平交错以适合它们。

staggered versus stacked boxouts

我想做的是让 boxouts 堆叠起来,让它们旁边 float 的文本稍微向下移动以腾出空间。

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

编辑:没有太多代码可以展示——到目前为止我只有这个:

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

这成功地堆叠了 boxouts,但它们最终与关联的代码行未对齐。

编辑:这是对齐问题的示例:

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

这给出了这个结果,其中第二条评论与它所伴随的段落不一致。 (彩色线条表示它们应该排列的位置。)

Showing misaligned text

这是否使问题更清楚了?这有点模糊,我知道...

编辑:根据请求扩展 HTML 以包含整个代码。

最佳答案

使用权限:

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

This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box.

Values other than 'none' potentially introduce clearance. Clearance inhibits margin collapsing and acts as spacing above the margin-top of an element. It is used to push the element vertically past the float.

像这样:

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 - 如何在 css 中格式化 boxouts,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40722323/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com