it-swarm-ko.tech

CSS를 사용하여 "상자"의 오른쪽 상단 또는 오른쪽 하단에 텍스트를 넣는 방법

hereand here lorem ipsums와 같은 줄에 오른쪽에 있어야합니까? 다음을 참조하십시오.

Lorem Ipsum etc........here  
blah.......................  
blah blah..................  
blah.......................  
lorem ipsums.......and here
15
Corey Trager
<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>

"상단"및 "하단"값을 조정해야 할 수도 있지만 꽤 가깝습니다.

31
Garry Shutler

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

<html>
  <body>
    <div>
      <span style="float:right">here</span>Lorem Ipsum etc<br/>
      blah<br/>
      blah blah<br/>
      blah<br/>
      <span style="float:right">and here</span>lorem ipsums<br/>
    </div>
  </body>
</html>

이것은 상단 및 하단 모서리뿐만 아니라 모든 라인에 적용됩니다.

3
phloopy

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

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 */
 # 여기서 {position : absolute; top : 0; right : 0;} 
 # andhere {position : absolute; bottom : 0; right : 0;} 

다시 말하지만, #lipsum이 절대를 통해 배치 된 경우에만 위의 작업이 안정적으로 작동합니다.

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

 # 여기, #and 여기 {float : right;} 

또한 적절한 장소에 마크 업을 넣어야합니다. 더 나은 프리젠 테이션을 위해 두 개의 div에는 텍스트가 모두 연결되지 않도록 약간의 여백과 여백이 필요할 수 있습니다.

1
BrewinBombers

첫 번째 줄은 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>입니다.

5는 1처럼 작동합니다.

0
user1151

"여기"를 <div> 또는 <span>style="float: right".

0
AdamB

절대 위치를 사용할 수 있습니다.

컨테이너 박스는 position: relative.

오른쪽 상단 텍스트는 position: absolute; top: 0; right: 0. 오른쪽 하단 텍스트는 position: absolute; bottom: 0; right: 0.

padding로 실험하여 상자의 주요 내용이 텍스트 요소의 일반적인 흐름 외부에 존재하는 절대 위치 요소 아래에서 실행되는 것을 중지해야합니다.

0
ceejayoz
<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>
0
Loren Segal

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

#date {
  margin-right:5px;
  position:relative;
  float:right;
}
0
trillions

또는 필요에 맞는 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>

em를 오른쪽으로 플로팅 (display: block) 또는 position: absolute 부모를 position: relative.

0
Bruce