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

StackOverflow https://stackoverflow.com/questions/65536

  •  09-06-2019
  •  | 
  •  

문제

어떻게 얻을 수 있나요? here 그리고 and here lorem ipsums와 같은 줄에 있는 오른쪽에 있으려면?다음을 참조하세요.

Lorem Ipsum etc........here  
blah.......................  
blah blah..................  
blah.......................  
lorem ipsums.......and here
도움이 되었습니까?

해결책 

<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>

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

다른 팁

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

<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>

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

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에 패딩과 여백이 필요할 수 있습니다.

<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>

또는 더 나은 방법은 필요에 맞는 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.

"여기"를 넣어야 합니다. <div> 또는 <span> ~와 함께 style="float: right".

첫 번째 줄은 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처럼 작동합니다.

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

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

오른쪽 상단 텍스트는 다음과 같이 설정되어야 합니다. position: absolute; top: 0; right: 0.오른쪽 하단 텍스트는 다음과 같이 설정되어야 합니다. position: absolute; bottom: 0; right: 0.

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

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

#date {
  margin-right:5px;
  position:relative;
  float:right;
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top