CSS 스타일링 테이블

Question

은 내가 이런 일을해야

#sub-content .left{ 
    width: 326px; 
    height: 145px; 
    display: inline-block; 
    float:left;   
} 

#sub-content img{ 
    width: 122px; 
    height: 121px; 
    display: inline-block; 
    margin-top: 0px; 
    margin-left: 5px;   
} 

#sub-content .topic-name{ 
    width: 150px; 
    height: 14px; 
    line-height 14px; 
    margin-bottom: 130px; 
    margin-left: 10px; 
    display: inline-block; 
    vertical-align: top; 
    text-decoration: underline; 
    font-weight: 14px;   
} 

#sub-content table{ 
    width:326px; 
    height:145px;   
} 

#sub-content tr{ 
    margin: 10px 0px 0px 0px; 
    padding: 0px; 
    height: 36px;   
} 

#sub-content .date{    
} 

#sub-content .img-position{ 
    margin: 0px; 
    padding: 0px; 
    width: 122px; 
    height: 121px; 
    display: inline-block;   
} 

그리고 난 내 위치에서 이동하지 못할이어야 그 부분의 하나의 스타일을하고 그냥 3 번 복사 :

<table> 
     <tr> 
      <td rowspan="2" class="img-position"><a href="#"><img src="images/foto.png"></a></td> 
      <td class="topic-name"><a href="#">Název topicu nebo článku </a></td> 
      <td class="date">28.8.2014/19:30</td> 
     </tr> 
    </table> 

내 CSS :처럼 내 시도가 보인다. 내가 누가 그 문제를 고칠 수있게 도와 줄 수있는 사람을 찾길 바래. NON 의미를

Answer 1

첫째을 사용할 필요가 : 당신이 당신의 레이아웃을 생성 할 방법에 대한 Why not use tables for layout in HTML?의를.

나는 당신이 주어진 것들로 기본 jsfiddle 예제를 준비하여 당신이 빨리 일을 따라 잡을 수 있도록했다. 이것 좀 봐.

Example layout 나는 div의 및 스팬에 주어진 레이아웃을 변경하고 그것을 더 많거나 적은 다음과 같을 것이다 :

<div class='article-container'> 
    <div class='article'> 
    <div class="img-position"> 
    <a href="#"><img src="http://funedit.com/andurit/try1/images/foto.png"/></a> 
    </div> 
    <span class="topic-name"><a href="#">Název topicu nebo článku </a></span> 
    <span class="date">28.8.2014/19:30</span> 
    </div> 
    . 
    . 
    . 
</div> 

Answer 2

내 게시물 읽기 테이블에이 작업을 수행하는 http://funedit.com/andurit/try1/

감사합니다 나는 그것을 권장하지 :

라이브 미리보기가에서 찾을 수 있습니다. 내 의견에 대한 당신은 당신이이 글을 읽을 것을 권장이 구조

HTML을 모두

<div class="block1">block1</div> 
     <div class="block2">block2</div> 
     <div class="block3">block3</div> 
    </div> 
* { 
    margin: 0; 
    padding: 0; 
} 
html, body { 
    height: 100%; 
    width: 100%; 
} 
.wrapper{ 
    width: 100%; 
    background: #ddd; 
} 
.block1{ 
    float: left; 
    width: 33.3%; 
    background: #c01; 
    height: 200px; 
    margin-right: 1px; 
} 
.block2{ 
    float: left; 
    width: 33.3%; 
    background: #c01; 
    height: 200px; 
    margin-right: 1px; 
} 
.block3{ 
    float: left; 
    width: 33.3%; 
    background: #c01; 
    height: 200px; 
} 

Answer 3

사용 bootstrap 그리드, 표 스타일을 달성하기 위해. 반응이 빠르고 구현하기 쉽습니다. 포함 : CSS file.

<div class='row'> 
     <div class='col-xs-4 tab'> <!-- 1/3rd size of the parent container --> 
     <div class='row'> 
      <!-- Image box --> 
      <div class='col-xs-4'> 
      <a href="#"><img src="images/foto.png"></a> 
      </div> 
      <!-- Description box --> 
      <div class='col-xs-8'> <!-- 2/3rd size of parent container --> 
      <div><a href="#">Název topicu nebo článku </a></div> 
      <div>28.8.2014/19:30</div> 
      <div>Lorem Ipsum</div> 
     </div> 
     </div> 
    </div> 

    <div class='col-xs-4 tab'> <!-- 1/3rd size of the parent container --> 
    <div class='row'> 
     <!-- Image box --> 
     <!-- ... Follow same structure as above--> 
    </div> 
    </div> 

    <div class='col-xs-4 tab'> <!-- 1/3rd size of the parent container --> 
    <div class='row'> 
     <!-- ... Follow same structure as above --> 
    </div> 
    </div> 
</div> 

이렇게하면 동일한 너비의 행에 3 개의 열이 표시됩니다. 각 탭의 고정 높이 , 그냥 구현 자세한 내용은

<style> 
.tab{ 
    height: 200px; 
} 
</style> 

을 제공 here를 참조하십시오.