我如何格式化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

回答

相關問題