컨테이너 상단에 이미지를 추가하고 열을 만듭니다.

Question

문제는이 유형의 코드가 어떻게 호출되는지 모르겠으니 여기에서 검색하는 것이 다소 어렵습니다.

는 내가 뭘해야 컨테이너에 최고의 배경을 추가하는 것입니다 그래서 그 같은 :

"텍스트 헤더"- 내가 헤더에서 별도의 콘텐츠에 배경을 갖고 싶어 그 아래 다음 (1가 2 분할되고 그 다음 완전한 하나) 3 개의 열

jsfiddle.net/U56UA/는 (미안를 코딩하는 방법 idk에)

엔터의 대물을 만들 개인 정보 (서비스 등)를 위해 아래에있는 것과 어떤 회원인지를 나타내는 두 번째 레이어

누군가가 나를 설명 할 수 있다면 정말 좋을 것입니다. , 죄송합니다) 또는 설명 된 웹 사이트를 보내십시오.

편집 : http://pastebin.com/4BVfeFxj (현재 지수) http://pastebin.com/56Mtk1yg (현재 CSS)

감사합니다!

Answer 1

여기 이미지에 기반 FIDDLE입니다.

<div class="container"> 

    <header>Stats</header> 

    <section class="left"> 
    <span>LEFT</span> 
    </section> 

    <section class="right"> 
    <span>RIGHT</span> 
    </section> 

    <footer> 
    <span>CONTENT</span> 
    </footer> 

</div> 

---

.container { 
    width: 1000px; 
    margin: 0 auto; 
    border: 1px solid #c5c5c5; 

    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
} 
header { 
    background: #000; 
    height: 40px; 
    line-height: 40px; 
    color: #fff; 
    text-align: center; 
} 
footer { 
    clear: both; 
    width: 97.8%; 
    min-height: 180px; 
    padding: 10px; 
    text-align: center; 
    border: 1px solid #c5c5c5; 
} 
.left, 
.right { 
    float: left; 
    width: 47.8%; 
    min-height: 200px; 
    padding: 10px; 
    border: 1px solid #c5c5c5; 
} 

Answer 2

당신의 JSFiddle의 this modification 참조하십시오

CSS :

.container { 

    margin-left: auto; 
    margin-right: auto; 
    border-radius: 3px; 
    background-color: white; 
    padding: 5px 5px; 
    border: 1px solid hsl(0, 0%, 77%); 
} 
.container table { 
    width:100%; 

} 
.container table tr td,th{ 
    padding: 5px; 

} 
.container table td { 
    border:1px solid gray; 

} 
.container .statshead { 
    background: black; 
    color: white; 
    width:100%; 
} 

HTML :

을

<div class="container"> 
<table align="center" border="0" cellspacing="15"> 
    <tr> 
     <th colspan="2" class="statshead"> 
      Statictic 
     </th> 

    </tr> 
    <tr> 
     <td>Name:</td> 
     <td>Text Demo</td> 
    </tr> 
    <tr> 
     <td>Name:</td> 
     <td>Text Demo</td> 
    </tr> 
    <tr> 
     <th colspan="2" class="statshead"> 
      Information 
     </th> 

    </tr> 
    <tr> 
     <td>Name:</td> 
     <td>Text Demo</td> 
    </tr> 
    <tr> 
     <td>Name:</td> 
     <td>Text Demo</td> 
    </tr> 

</table></div>