왼쪽 및 오른쪽으로 유체 div가있는 가운데 고정 폭 너비?

Question

저는 WordPress 사이트에서 일하고 있습니다.
(다음은 실제 HTML 구조 아닙니다 그냥 예를 목적으로하다)

<div class="decoration-left"> <div class="title"> <div class="decoration-right"> 

.title은 내부 H1 제목이 있습니다
나는 다음과 같이 구성되어 이러한 장식 종이 등록되어 있습니다.
.decoration-left 및 .decoration-right는 장식 배경이있는 빈 div입니다.
항상 가운데에 제목이 있어야합니다.

처음 세 개의 div에 33.3 % 너비가 주어지기 시작했습니다. 큰 화면에서는 좋았지 만, 창을 줄이면 제목이 두 줄로 나뉘며보기에는 좋지 않습니다. 그러므로 일정한 폭을 갖는 제목이 필요합니다. 나는 텍스트를 더 작게하고 싶지 않다.

지금 바로 "width : auto"라는 .title div가 있습니다. 그러나 나는 왼쪽/오른쪽 장식 divs 각 하나, 나머지 공간의 절반은 반응/유체 방식으로 가져 가야합니다.

더 나은 이해를 돕기위한 첨부 사진!

Answer 1

제 생각에는 장식용 div를 제목 div에 넣고 제목 div를 WRAP div 안에 넣으십시오. 'position : relative'를 사용하여 TITLE div를 만듭니다. 디스플레이 : 인라인 블록; 배경 : #fff; ' 장식적인 것들은 'position : absolute; 왼쪽 : -50px; 및 '위치 : 절대; 오른쪽 : -50px; ','text-align : center; 배경 : URL (LINE IMAGE LINK) 센터 반복 -x; '.

나는 이해하기 어렵다는 것을 알고 있지만, 나는 그것이 그런 식으로 작동 할 것이라고 확신한다. 나는 그것의 일부를 코딩하여 더 나은 보이게하려고합니다 :

HTML :

<div class="title-warpper"> 
<div class="title"> 
    <div class="decoration-left"></div> 
    <span>YOUR TITLE HERE</span> 
    <div class="decoration-right"></div> 
</div> 
</div> 

CSS :

div.title-wrapper { 
background:url(LINE IMAGE LINK) center repeat-x; 
text-align: center; 
} 
div.title { 
position:relative; 
background:#fff; 
display:inline-block; 
} 
div.decoration-right{ 
position:absolute; 
right:-25px; 
background:url(DECORATION BG LINK); 
width:25px; 
height:25px; 
} 
div.decoration-left{ 
position:absolute; 
left:-25px; 
background:url(DECORATION BG LINK); 
width:25px; 
height:25px; 
} 

내가 25 픽셀의 장식 된 div를 설정하지만, 당신이 필요로 사용할 수 있습니다. 필요에 맞게 왼쪽 및 오른쪽 속성을 조정해야합니다.

Answer 2

일부 화면 크기에 장식 된 div 중복 제목을 신경 쓰지 않는 경우에 당신은 절대 위치

position:absolute; 
left:0px; (OR right:0px;) 

로 장식 된 div 당신이 원하는대로 폭과 높이를 제공 할 수 있습니다.