Mozilla Firefox 显示图片的不同位置
Mozilla Firefox shows different positions of pictures
我正在使用 Twitter Bootstrap 构建网站。我将页面内容分为 4 个部分 - 1. 是标题 (col-sm-4
),2.,3.,4 是图片 (col sm-2
, col-sm-2
, col-sm-4
).我做了一个CSSclass把图片拉下来。我希望它们在 H3 标题旁边排成一排 Obrazky:
。每个浏览器都完全按照我想要的方式显示它,除了 Mozzila 将这三个图像放在整个网页旁边。我需要解决这个问题。
HTML
<div class="col-sm-4">
<br>
<h3>Obrázky:</h3>
</div>
<div class="col-sm-2 pull-down">
<br><br>
<img src="img/mobil.png" alt="mobil" class="img-responsive img-center">
<p class="text-center"><strong>Zobrazení na mobilu</strong></p>
<br>
</div>
<div class="col-sm-2 pull-down">
<img src="img/tablet.png" alt="tablet" class="img-responsive img-center">
<p class="text-center"><strong>Zobrazení na tabletu</strong></p>
<br>
</div>
<div class="col-sm-4 pull-down">
<img src="img/notebook.png" alt="notebook" class="img-responsive img-center">
<p class="text-center"><strong>Zobrazení na notebooku</strong></p>
<br>
</div>
CSS
.pull-down {
float: none;
display: table-cell;
vertical-align: bottom;
}
试试这个:
<div class="container">
<div class="row">
<div class="col-sm-4">
<br>
<h3>Obrázky:</h3>
</div>
<div class="col-sm-2 pull-down">
<br><br>
<img src="img/mobil.png" alt="mobil" class="img-responsive img-center">
<p class="text-center"><strong>Zobrazení na mobilu</strong></p>
<br>
</div>
<div class="col-sm-2 pull-down">
<img src="img/tablet.png" alt="tablet" class="img-responsive img-center">
<p class="text-center"><strong>Zobrazení na tabletu</strong></p>
<br>
</div>
<div class="col-sm-4 pull-down">
<img src="img/notebook.png" alt="notebook" class="img-responsive img-center">
<p class="text-center"><strong>Zobrazení na notebooku</strong></p>
<br>
</div>
</div>
</div>
我正在使用 Twitter Bootstrap 构建网站。我将页面内容分为 4 个部分 - 1. 是标题 (col-sm-4
),2.,3.,4 是图片 (col sm-2
, col-sm-2
, col-sm-4
).我做了一个CSSclass把图片拉下来。我希望它们在 H3 标题旁边排成一排 Obrazky:
。每个浏览器都完全按照我想要的方式显示它,除了 Mozzila 将这三个图像放在整个网页旁边。我需要解决这个问题。
HTML
<div class="col-sm-4">
<br>
<h3>Obrázky:</h3>
</div>
<div class="col-sm-2 pull-down">
<br><br>
<img src="img/mobil.png" alt="mobil" class="img-responsive img-center">
<p class="text-center"><strong>Zobrazení na mobilu</strong></p>
<br>
</div>
<div class="col-sm-2 pull-down">
<img src="img/tablet.png" alt="tablet" class="img-responsive img-center">
<p class="text-center"><strong>Zobrazení na tabletu</strong></p>
<br>
</div>
<div class="col-sm-4 pull-down">
<img src="img/notebook.png" alt="notebook" class="img-responsive img-center">
<p class="text-center"><strong>Zobrazení na notebooku</strong></p>
<br>
</div>
CSS
.pull-down {
float: none;
display: table-cell;
vertical-align: bottom;
}
试试这个:
<div class="container">
<div class="row">
<div class="col-sm-4">
<br>
<h3>Obrázky:</h3>
</div>
<div class="col-sm-2 pull-down">
<br><br>
<img src="img/mobil.png" alt="mobil" class="img-responsive img-center">
<p class="text-center"><strong>Zobrazení na mobilu</strong></p>
<br>
</div>
<div class="col-sm-2 pull-down">
<img src="img/tablet.png" alt="tablet" class="img-responsive img-center">
<p class="text-center"><strong>Zobrazení na tabletu</strong></p>
<br>
</div>
<div class="col-sm-4 pull-down">
<img src="img/notebook.png" alt="notebook" class="img-responsive img-center">
<p class="text-center"><strong>Zobrazení na notebooku</strong></p>
<br>
</div>
</div>
</div>