0

我的目标是将切片图像变成交互式图像。我使用 css 表是因为我有 4 行图像，每行具有不同数量的图像（切片），并且每个图像的宽度不同，行内的高度相同。

基本构造在 Safari 中有效，但在 Firefox 中无效。我知道 css 表不适用于“块元素”，在尝试使用标准 div 之前，我已经花费了无数个小时。

我希望整个页面都可以缩放，但是我似乎找不到正确的方法来处理这个问题。我有一个可以作为固定尺寸正常工作的版本，但我似乎无法让它变成液体。

任何想法都会受到欢迎和赞赏。

这是我的CSS。

.container {
max-width: 871px;
width:100%; 
}

.tb {
display: table;
width: 100%;
margin: 0 auto;
background-color: #FFF;
}

.tbr {
display: table-row;
width:100%;
}

.tbc {
display: table-cell;
vertical-align: top;
}

.tb img {
float:left;
}

.content {
padding: 0px 0;
}

.row1 {
width:100%;
max-height:227px;
float:left;
}

.row2 {
width:100%;
float:left;
max-height:145px;
}

.row3 {
    width:100%;
float:left;
max-height:118px;
}

.row4 {
width:100%;
float:left;
max-height:145px;
}

...和 ​​html

<div class=" container">
<div class="tb">
<div class="tbr">
<div class="tbc row1"><img src="images/house_01.png"></div></div>

<div class="tbr row2" >
<div class="tbc"><img src="images/house_02.jpg"></div>
<div class="tbc"><img src="images/house_03.jpg"></div>

<div class="tbc"><img src="images/heat_01.png"/></div>
<div class="tbc"><img src="images/house_05.jpg"/></div></div>

<div class="tbr row3" >
<div class="tbc"><img src="images/house_06.jpg"></div>
<div class="tbc"><img src="images/house_07.jpg"></div>
<div class="tbc"><img src="images/house_08.jpg"/></div>
<div class="tbc"><img src="images/house_09.jpg"/></div>
<div class="tbc"><img src="images/house_10.jpg"/></div>
<div class="tbc"><img src="images/heat_02.png" /></div>
<div class="tbc"><img src="images/house_11.jpg"/></div>
<div class="tbc"><img src="images/house_12.jpg"/></div>
<div class="tbc"><img src="images/house_13.jpg"/></div></div>

<div class="tbr row4">
<div class="tbc"><img src="images/house_14.jpg"></div>
<div class="tbc"><img src="images/house_15.jpg"></div>
<div class="tbc"><img src="images/house_16.jpg"/></div>
<div class="tbc"><img src="images/house_17.jpg"/></div>
<div class="tbc"><img src="images/house_18.jpg"></div>
</div>

<div class="tbr">
<div class="tbc"><img src="images/house_19.jpg" style="float:left"></div></div></div>
4

1 回答 1

0

你用 float 属性做什么？我也不明白你为什么要定义一个高度。如果您想在表格变小时缩放图像，请将它们的宽度设置为 100%。

于 2014-01-03T16:53:18.363 回答