Question

我的目标是将切片图像转换为交互式图像。我选择了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>

Answer 1

您使用浮动属性是为了什么？我也不明白你为什么要定义一个高度。如果你想要缩小图像，如果表变小，则给它们宽度为100％。

具有多行可伸缩图像的响应式css表

1 个答案: