템플릿 css를 사용하여 "상자"의 오른쪽 위 또는 오른쪽 하단에 텍스트를 배치하는 방법




html css (8)

나는 어떻게 hereand here 를 로렌 섬섬과 같은 선상에 놓을 수 있을까? 다음을 참조하십시오.

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

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

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

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


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

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

또는 더 나은 점은 필요에 맞는 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 로 설정하고 parent를 position: relative 합니다.


<div> 또는 <span>style="float: right" 를 사용하여 "here"를 넣어야합니다.


첫 번째 줄은 3 <div> 로 구성됩니다. 하나의 바깥쪽에 두 개의 내부 <div> 가 있습니다. 첫 번째 내부 <div>float:left 을두고, 두 번째는 float:right 가지고 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; top: 0; right: 0 position: absolute; top: 0; right: 0 position: absolute; top: 0; right: 0 . 하단 오른쪽 텍스트는 position: absolute; bottom: 0; right: 0 로 설정해야합니다 position: absolute; bottom: 0; right: 0 position: absolute; bottom: 0; right: 0 position: absolute; bottom: 0; right: 0 .

텍스트 내용의 정상적인 흐름 외부에 존재하기 때문에 상자의 주요 내용이 절대 위치 지정된 요소 아래에서 실행되지 않도록하려면 padding 을 시험해야합니다.





layout