머리글 1 ~ 2 이미지

Question

양쪽에 이미지가있는 H1을 만들 필요가 있습니다.

한 줄에 있어야하며 반응이 있어야합니다.

이처럼

있지만 ====가 작은 라인의 화상이다

========= HEADER 텍스트 ============

현재 코드는 다음과 같습니다

<h1><img src="{{media url="wysiwyg/mintbar.png"}}" alt="" /> of WATCHES &amp; MEN <img src="{{media url="wysiwyg/mintbar.png"}}" alt="" /></h1> 

어떤 생각? 미리 감사드립니다!

Answer 1

인라인 블록으로 설정 한 이미지와 H1 제목 유무 : http://jsfiddle.net/

HTML :

이

<img id="image-surround" src="{{media url="wysiwyg/mintbar.png"}}" alt="" /> 
<h1>of WATCHES &amp; MEN</h1> 
<img id="image-surround" src="{{media url="wysiwyg/mintbar.png"}}" alt="" /> 

CSS :

#image-surround { display: inline-block; 
} 

h1 { display: inline-block; 
} 

물론

---

, 당신이 필요합니다 모든 사람이 적절하게 대응할 수있는 용기를 갖추어야합니다. http://jsfiddle.net/qn8dnvmg/4/

HTML :

<div class="container"> 
    <div class="columns onethird"> 
     <img id="image-surround" src="{{media url="wysiwyg/mintbar.png"}}" alt="" /> 
    </div> 
    <div class="columns onethird"> 
     <h1>of WATCHES &amp; MEN</h1> 
    </div> 
    <div class="columns onethird"> 
     <img id="image-surround" src="{{media url="wysiwyg/mintbar.png"}}" alt="" /> 
    </div> 
</div> 

CSS :

.container { position: relative; 
margin: 0 auto; 
padding: 0; 
width: 960px; 
padding-left: 10px; 
padding-right: 10px; 
} 

.container .column, .container .columns { float: left; 
display: inline; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
padding-left: 2px; 
padding-right: 2px; 
} 

.row { margin-bottom: 20px; 
} 

.clear { clear: both; 
height: 1px; 
width: 100%; 
} 

.container .onehalf.columns { width: 50%; } 
.container .full.columns { width: 100%; } 

.container .onethird.columns { width: 33.33%; } 
.container .twothirds.columns { width: 66.66%; } 

.container .onequarter.columns { width: 25%; } 
.container .twoquarters.columns { width: 50%; } 
.container .threequarters.columns { width: 75%; } 

.container .onefifth.columns { width: 20%; } 
.container .twofifths.columns { width: 40%; } 
.container .threefifths.columns { width: 60%; } 
.container .fourfifths.columns { width: 80%; } 

.container .oneeight.columns { width: 12.5%; } 
.container .twoeights.columns { width: 25%; } 
.container .threeeights.columns { width: 37.5%; } 
.container .foureights.columns { width: 50%; } 
.container .fiveeights.columns { width: 62.5%; } 
.container .sixeights.columns { width: 75%; } 
.container .seventeights.columns { width: 87.5%; } 

.container .onetenth.columns { width: 10%; } 
.container .twotenths.columns { width: 20%; } 
.container .threetenths.columns { width: 30%; } 
.container .fourtenths.columns { width: 40%; } 
.container .fivetenths.columns { width: 50%; } 
.container .sixtenths.columns { width: 60%; } 
.container .seventhtenths.columns { width: 70%; } 
.container .eighttenths.columns { width: 80%; } 
.container .ninetenths.columns { width: 90%; } 

그리고 등