css를 사용하여 "상자"의 오른쪽 위 또는 오른쪽 하단에 텍스트를 삽입하는 방법

Question

here 및 and here은 lorem ipsum과 같은 줄에 어떻게 표시 되나요? 다음을 참조하십시오.

Lorem Ipsum etc........here 
blah....................... 
blah blah.................. 
blah....................... 
lorem ipsums.......and here 

Answer 1

<div style="position: relative; width: 250px;"> 
 
    <div style="position: absolute; top: 0; right: 0; width: 100px; text-align:right;"> 
 
    here 
 
    </div> 
 
    <div style="position: absolute; bottom: 0; right: 0; width: 100px; text-align:right;"> 
 
    and here 
 
    </div> 
 
    Lorem Ipsum etc <br /> 
 
    blah <br /> 
 
    blah blah <br /> 
 
    blah <br /> 
 
    lorem ipsums 
 
</div>

, 당신은 아주 가까이 가져옵니다.

Answer 2

첫 번째 줄은 3 <div>입니다. 내부에 두 개의 내부가 포함 된 하나의 외부 <div>. 첫 번째 내부 <div>은 float:left을 가지므로 왼쪽으로 유지해야하며 두 번째는 float:right이어야합니다. 그러면 오른쪽으로 고정됩니다.

<div style="width:500;height:50"><br> 
<div style="float:left" >stuff </div><br> 
<div style="float:right" >stuff </div> 

... 분명히 인라인 스타일링은 좋은 생각이 아닙니다.하지만 당신은 요점을 얻습니다.

2,3 및 4는 단일 <div>입니다. 당신은 <div> 또는 style="float: right"와 <span>에 "여기"둘 필요가

Answer 3

1. 같은

5

가 작동합니다.

Answer 4

절대 위치 지정 기능을 사용할 수 있습니다.

컨테이너 상자는 position: relative으로 설정해야합니다.

오른쪽 상단 텍스트는 position: absolute; top: 0; right: 0으로 설정해야합니다. 오른쪽 하단 텍스트는 position: absolute; bottom: 0; right: 0으로 설정해야합니다.

상자의 주요 내용이 텍스트 내용의 정상적인 흐름 외부에 있기 때문에 절대 배치 된 요소 아래에서 실행되지 않도록하려면 padding을 실험해야합니다. 당신은 '상단'및 '하단'으로 값을 조정할 필요가 수 있지만

Answer 5

<style> 
    #content { width: 300px; height: 300px; border: 1px solid black; position: relative; } 
    .topright { position: absolute; top: 5px; right: 5px; text-align: right; } 
    .bottomright { position: absolute; bottom: 5px; right: 5px; text-align: right; } 
</style> 
<div id="content"> 
    <div class="topright">here</div> 
    <div class="bottomright">and here</div> 
    Lorem ipsum etc................ 
</div> 

Answer 6

Lorum Ipsum을 포함하는 요소의 위치가 절대로 설정된 경우 CSS를 통해 위치를 지정할 수 있습니다. "여기"및 "여기"요소는 블록 수준 요소에 포함되어야합니다. 이런 마크 업을 사용하겠습니다.

print("<div id="lipsum">"); 
print("<div id="here">"); 
print(" here"); 
print("</div>"); 
print("<div id="andhere">"); 
print("and here"); 
print("</div>"); 
print("blah"); 
print("</div>"); 

다음은 위의 CSS입니다.

 
#lipsum {position:absolute;top:0;left:0;} /* example */ 
#here {position:absolute;top:0;right:0;} 
#andhere {position:absolute;bottom:0;right:0;} 

위의 내용은 #lipsum이 절대 경로를 통해 배치 된 경우에만 작동합니다 (신뢰할 수 있습니다).

그렇지 않으면 float 속성을 사용해야합니다.

 
#here, #andhere {float:right;} 

또한 적절한 위치에 마크 업을 넣어야합니다. 더 나은 프레젠테이션을 위해 두 div는 텍스트가 모두 함께 작동하지 않도록 약간의 여백과 여백이 필요할 것입니다.

Answer 7

여러분의 필요에 맞는 HTML 요소를 사용하십시오. 깨끗하고 마크 업이 적다.예 :

<dl> 
    <dt>Lorem Ipsum etc <em>here</em></dt> 
    <dd>blah</dd> 
    <dd>blah blah</dd> 
    <dd>blah</dd> 
    <dt>lorem ipsums <em>and here</em></dt> 
</dl> 

이 ( display: block와) 오른쪽으로 em 플로트, 또는 position: relative로 부모와 함께 position: absolute로 설정

.

Answer 8

오른쪽에 표시하려는 텍스트와 마크 업에서이 텍스트와 그 주변 범위가 왼쪽에 있어야하는 텍스트보다 먼저 나오는지 확인하십시오. 먼저 발생하지 않으면 다른 줄에 나타나는 부동 텍스트에 문제가있을 수 있습니다.

상단 및 하단 모서리뿐만 아니라 모든 행에 적용됩니다.

Answer 9

오른쪽에 div 요소를 띄우고 여백을 주면됩니다. 이 경우 "절대"를 사용하지 마십시오.