CSS에서 상자 서식을 지정하는 방법

필자가 작성한 일부 VBA 코드에 대한 몇 가지 문서를 작성 중이며 주석을 추가하여 메모를 추가하려고합니다. 과거에는 항상 오른쪽으로 띄워 보았습니다.하지만 이제는 순차적 라인에 주석을 달아서 한 줄에 주석을 넣을 공간이 충분하지 않습니다. 결론적으로 의견 엔드 업에 모두 맞게 수평으로 비틀 거렸다는 것이다. 내가하고 싶은 무엇CSS에서 상자 서식을 지정하는 방법

는 boxouts 스택하고 그들이 내려 셔플 옆에 떠있는 텍스트를 만드는 것입니다 비트는 공간을 만듭니다.

할 수 있습니까? 내 HTML/CSS 기술은

... 편집 약간 녹슨와 4.01 일에서 있습니다 보여 많은 코드가 아니다 - 지금까지 나는 단지이있다 : 성공적으로 boxouts 스택

.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을 확장했습니다.

출처

2016-11-21 Andrew Perry

코드! 아기, 코드 ??? –

대화가 저렴합니다. 나에게 코드를 보여주세요 - Linus Torvalds –

보여줄 것이별로 없지만 지금까지 가지고있는 코드를 추가했습니다. –

사용 허가는 :

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>

출처

2016-11-21 14:24:24 Oriol

감사합니다 - 스태킹 문제를 해결합니다. 본문 텍스트를 강제로 따르도록 할 수있는 방법이 있습니까? –

@AndrewPerry 본문 내용은 무엇입니까? 이미 작동해야합니다. – Oriol

질문에 예제를 추가하겠습니다. –

CSS에서 상자 서식을 지정하는 방법

답변

관련 문제