[英]CSS - Styling table
我需要做這樣的事情:
我不是100%知道如何做到這一點,所以我決定選擇一個可能有用的表,但這只是分散了我的工作,我的嘗試如下所示:
<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:
#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次。 我希望我在這里找到可以幫助我修復它的人。
實時預覽可以在以下網址找到: http : //funedit.com/andurit/try1/
感謝您閱讀我的帖子
首先,我建議您閱讀以下內容: 為什么不在HTML中使用表格進行布局? 有關您不應該如何創建布局的信息。
我用給定的東西為您准備了基本的jsfiddle示例,以使您更快地掌握最新信息。 看一下這個。 示例布局
我將給定的布局更改為div和spans,看起來或多或少像這樣:
<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>
在表NON Semantic中進行此操作,我不建議這樣做。 我認為您需要使用此結構
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;
}
使用引導網格,以實現表格樣式。 它反應靈敏且易於實施。 包括此CSS文件 。
<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>
有關實現的詳細信息,請參見此處 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.