텍스트 열 외부에있는 배경색 강조 상자를 만드는 방법 [그림 제공]

일련의 텍스트 블록으로 구성된 텍스트 열을 만들려고합니다.이 중 하나의 블록에 색이 지정되어 있습니다 열 밖에 도달하는 배경. 내가 만들고있어보다 이것이 훨씬 더 쉽게해야한다 의심텍스트 열 외부에있는 배경색 강조 상자를 만드는 방법 [그림 제공]

: 나는 두 가지 방법으로이 작업을 수행하려면 먼저 텍스트 레이아웃이 영향을받지이고, 두 번째 여분의 경계 공간이있는 곳 그것.

저는 div 요소로 10px의 여백을두고 각 블록을 둘러싼 다음 강조 표시된 블록에 대해 0px의 여백을 설정하고 10px의 여백을 설정하여 첫 번째 작업을 시도했습니다.

정상적인 단락에 적합합니다. 문제는 텍스트 블록이 제목 (예 : h3 제목)으로 시작하고 하단, 왼쪽 및 아래쪽에 대한 채우기가 잘 작동하지만 위쪽 채우기가 원하는 것 이상을 추가하며 수동으로도 가능하지 않다는 것입니다 (padding-top : 1px와 padding-top : 0px) 사이에 매우 큰 점프가 있기 때문에 조정할 필요가 없습니다.

<html> 
<body> 
    <div class="block"> 
     <p> 
     Test Test Test Test Test Test 
     </p> 
    </div> 
    <div class="block test2-block"> 
     <h3>Test Title</h3> 
     Test2 Test Test Test Test Test 
    </div> 
    <div class="block"> 
     <p> 
     Test3 Test Test Test Test Test 
     </p> 
    </div> 
</body> 
<style> 
    .block { 
     margin:10px; 
    } 
    .test2-block { 
     background-color:green; 
     margin:0px; 
     padding-right:10px; 
     padding-left:10px; 
     padding-bottom:10px; 
     /*This value can't be tweaked manually, try 0, 1, and 10 pixel values*/ 
     padding-top:10px; 
    } 
</style> 
</html>

나는 방해받지 않는 레이아웃에 대해 어떻게 생각하는지 잘 모르겠습니다. 누군가 포인터를 줄 수 있습니까?

편집 : 아래의 aaronegan 및 sfyn 덕분에 여분의 경계 공간 (그림 오른쪽)을위한 해결책입니다. 누군가가 방해받지 않는 레이아웃 (그림 왼쪽)을 유지하는 방법을 알고 있다면 그것은 탁월 할 것입니다. 이것은 같은 종류의 트릭을 필요로합니까? 강조 표시된 블록 위 단락의 여백 - 아래를 수동으로 변경하고 아래 단락의 여백 - 위쪽을 수동으로 변경합니까? 이 작업을 동적으로 수행 할 수 있기를 바랬습니다. 앵커 링크로 스크롤 할 때 플래시가 흐려지는 배경을 추가했습니다. 블록 자체, 아래의 단락 및 위의 단락을 모두 동적으로 변경할 수는 있지만 어색해 보입니다.

출처

2014-04-14 JBass

당신이 염두에 두었던 것을이 스타일 규칙에 추가합니까? '.test2-block h3 {margin-top : 0; }'- http://jsfiddle.net/eM3BC/ – sfyn

내가 픽셀의 고정 된 양에 먼저 열의 폭을 설정하거나 앉아있는 div의의 폭 %를 사용하는 것이 좋습니다 것입니다.

당신 H3로 인해 발생하는 문제는 기본적으로, 그것은을 가지고 있다는 것입니다 margin-top 속성. 따라서 p의 모양이 좋더라도 h3에는이 때문에 맨 위에 추가 공간이 있습니다. 여기

내가 무슨 짓을했는지 :

가 (당신이 원하는 무엇이든)
이 .test2-에서 불필요한 패딩 - 위/아래/좌/우를 제거하여 CSS에서 당신의 열의 폭을 설정 블록 클래스와 단지가 패딩 10px

재정이와 CSS에서 H3 마진 탑 :

.block { 
    margin:10px; 
    width:200px; 
} 

.test2-block { 
    background-color:green; 
    margin:0px; 
    padding:10px; 
} 

.test2-block h3 { 
    margin-top:0px; 
}

Working JS Fiddle Here

출처

2014-04-14 23:31:23 aaronegan

텍스트 열 외부에있는 배경색 강조 상자를 만드는 방법 [그림 제공]

답변

관련 문제