it-swarm-ko.com

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

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

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