我如何格式化boxbox在css

我正在为我写的一些VBA代码编写一些文档，并且我正在尝试添加boxouts以添加注释的注释。在过去，我一直把它们推到右边，但现在我需要评论顺序线路，但没有足够的空间用于评论单线。其结果是，该意见落得水平交错，以适应他们所有英寸我如何格式化boxbox在css

我希望做的是让boxouts堆栈，使文字，他们接下来的洗牌下来要浮动位来腾出空间。

可以这样做吗？我的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; 
}

这给了这样的结果，其中第二注释不与其伴随的段落保持一致。（彩色线条表示，他们应该排队。）

那样做会使问题更清楚？这是有点模糊，我知道...

编辑：通过请求扩展HTML以包括整个代码。

来源

2016-11-21 Andrew Perry

代码！宝贝，代码??? –

对话很便宜。让我看看代码 - Linus Torvalds –

没什么可展示的，但我添加了目前为止的代码。 –

使用间隙：

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

此属性表示元素的盒子（ES）的侧面可以不邻接到一个较早的浮箱。

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

来源

2016-11-21 14:24:24 Oriol

谢谢 - 解决了堆叠问题。有什么方法可以强制正文文字跟随它？ –

@AndrewPerry什么正文文本？它应该已经工作 – Oriol

我会给这个问题添加一个例子。 –

我如何格式化boxbox在css

回答

相关问题