템플릿 - html css




css를 사용하여 "상자"의 오른쪽 위 또는 오른쪽 하단에 텍스트를 배치하는 방법 (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는 텍스트가 모두 함께 작동하지 않도록 약간의 여백과 여백이 필요할 것입니다.

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

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

또는 더 나은 점은 필요에 맞는 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 합니다.


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

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

컨테이너 상자는 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 을 시험해야합니다.


<div> 또는 <span>style="float: right" 를 사용하여 "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>

"위쪽"과 "아래쪽"값을 조정해야 할 수도 있지만 꽤 가깝게 만듭니다.





layout