2014-04-22 13 views
0

반응 형 웹 코딩 경험이 없지만 이미 반응 형 WordPress 테마에 반응 형 콘텐츠를 추가하고 싶습니다.반응 형 웹 페이지에 반응 형 콘텐츠

한 줄에 두 개의 상자를 만들고 싶습니다. 하나는 adsense 단위이고 다른 하나는 게시판 축소판 및 단추입니다.

이 방법이 효과적이지만 완전히 깨끗한 것은 아닙니다.

<div style="width:100%;min-height:230px"> 

<div style="width:50%;float:left;min-width:230px"> 
adsense here 
</div> 

<div style="width:50%;float:left;text-align:center;min-width:230px" id='playGameButton'> 
<?php echo get_the_post_thumbnail($page->ID, 'thumbnail'); ?><br /> 
<a href='#' class='big-button bigblue'>Play Game</a> 
</div> 

</div> 

어떤 도움을 주실 까? 고맙습니다!

+1

은 무엇을 도와 원하는가? 당신은 그것이 효과 있다고 말한다. 인라인 스타일이 없다는 것을 의미하는 경우 사용중인 테마에 대한 style.css 파일을 편집하고 위의 inine 스타일을 클래스에 추가하고 위의 HTML에서 클래스 이름을 사용해야합니다. 먼저 원본 파일을 백업하십시오. 마음에 드는 기본 테마 업데이 트가 당신이 그들에게 변경 사항을 제거 할 수 있습니다. 테마 만들기에 대한 자료 Wordpress codex를보십시오. – James

+0

나는 똑같은 일을하는 방법을 좀 더 현명한 방법으로 찾고 있었지만 이것이 괜찮다면 나의 질문은 이미 대답되어있다. 감사! :-) – Maras

+1

음 "ok"는 주관적입니다. 클래스 (또는 ID가 한 번만 사용되는 경우 ID)를 사용하여 테마의 외부 스타일 시트에 코드화합니다 (하지만 어쨌든 내 자신이나 클라이언트의 테마를 만들었을 것입니다). 다시 말하지만, 기본 테마를 사용했다면 위의 메소드를 잃어 버릴 수도 있습니다. 테마를 업데이트하면 style.css에 넣을 수도 있습니다. 자료 Wordpress Codex는 Wordpress 자료에 대한 모든 대답을 가지고 있습니다. – James

답변

0

여기 한 가지 방법이 있습니다. 미디어 쿼리를 추가하여 응답 성을 높일 수 있습니다.

<div class="cell leftside"> 
adsense here 
</div> 

<div class="cell rightside"> 
&lt;?php echo get_the_post_thumbnail($page->ID, 'thumbnail'); ?&gt;<br /> 
<a href='#' class='big-button bigblue'>Play Game</a> 
</div> 

.table { 디스플레이 표; 너비 : 100 %; 최소 높이 : 230px; 여백 : 0; }

. 셀 { 세로 정렬 : 위쪽; 디스플레이 : table-cell; 너비 : 50 %; 최소 너비 : 230px; 여백 : 0; 텍스트 정렬 : 가운데; }

.rightside { background-color : # 9baa32; } . 왼쪽면 { background-color : # f37820; (max-width : 400px) { .table { display : block; }

.cell { 
    display:block; 
    width:100%; 
    min-height:230px; 
} 

}

JSBin

http://jsbin.com/tezora/3/