동적 텍스트를 절대 위치로 div에 삽입하려면 어떻게해야합니까?

Question

보세요 http://www.barelyfitz.com/screencast/html-training/css/position/ 항목 6. 말한다 :

우리는 일반적으로 요소에 얼마나 많은 텍스트가 있는지 또는 사용될 정확한 글꼴 크기를 알지 못하기 때문에 대부분의 디자인에 대한 실행 가능한 솔루션이 아닙니다.

동적 텍스트를 절대 위치로 div에 삽입하려면 어떤 해결 방법을 사용해야합니까?

모든 접근 방식은 환영합니다

문안 인사,

Answer 1

당신의 주요 목표는 텍스트의 양에 따라 높이 나 너비를 바꾸지 않고 DIV를 그 장소에 유지하는 것이라면 다음과 같이 갈 것입니다.

div {
    overflow: scroll;
}

다른 옵션은 텍스트 크기가 DIV에 맞도록 축소되는 것이지만, 일정량의 퍼지 수학이 포함되며 텍스트가 너무 작아서 무의미 할 위험이 있습니다.

텍스트에 따라 DIV가 높이를 변경하려면 퍼지 수학도 포함되지만 기본적으로 텍스트의 길이를 얻을 수 있습니다.

var sometext = "Hey, I'm some text!";
var textlength = sometext.length();

그리고 그 길이와 관련하여 높이를 변화시킵니다. 당신은 숫자를 가지고 놀고 싶지만 다음과 같은 것처럼 보일 것입니다.

var div_height = 10 * textlength;
$("div").css("height,"+ div_height +"em");

Answer 2

W3C 사이트의 시각 효과 섹션을 참조하십시오 여기

Answer 3

아마도 사용 "오버플로 : 자동" 동적 텍스트 컨테이너 디스크의 경우 높이가 문제가되지 않습니다.

Answer 4

문제는 동적 텍스트를 절대적으로 배치 된 div에 넣는 것이 아닙니다. DIV는 거기에있는 텍스트에 맞게 확장됩니다. 예에서는 빨간색과 녹색 div에 정의 된 높이가 없습니다.

절대적으로 배치 된 div는 문서의 흐름에서 벗어나서 html에 나타나는 모든 것이 거기에 있지 않은 것처럼 작동합니다.

절대적으로 배치 된 DIV를 사용하는 설계는 포함 된 DIV에 높이가 정의되어 있어야하므로 절대적으로 배치 된 DIV는 다른 컨텐츠와 겹치지 않습니다. 당신의 예에서 <div id="div-1"> 높이는 250px입니다. 그것을 100px로 변경하면 볼 수 있습니다 <div id="div-after"> 빨간색과 녹색 divs 아래로 이동하십시오.

따라서 사이드 바에 절대적으로 배치 된 DIV가 있으면 아무것도없는 후에는 원하는 모든 동적 텍스트를 추가 할 수 있습니다. 헤더에 하나가 있다면 디자인을 구현하기가 매우 복잡하게 만들 것입니다.