Hallo,
ich habe folgendes Problem: auf der Seite sieht man, dass die Featured Boxen nebeneinander angeordnet sind:
<div id="featured-boxs">
<span class="featured-box-first">
<h2><a href="http://www.mitsubishi-hartmetall.com/wordpress/produkte/zerspanung">
<img class="fimage" src="http://www.mitsubishi-hartmetall.com/wordpress/wp-content/uploads/2013/07/zerspanen.jpg"/>Zerspanung</a></h2>
</span><span class="featured-box">
<h2><a href="http://www.mitsubishi-hartmetall.com/wordpress/produkte/messen">
<img class="fimage" src="http://www.mitsubishi-hartmetall.com/wordpress/wp-content/uploads/2013/07/messen_bewerten_forschung_0_standard.jpg"/>Messen</a></h2>
</span><span class="featured-box">
<h2><a href="http://www.mitsubishi-hartmetall.com/wordpress/produkte/spannen">
<img class="fimage" src="http://www.mitsubishi-hartmetall.com/wordpress/wp-content/uploads/2013/07/spannen_1-1.jpg"/>Spannen</a></h2>
</span><span class="featured-box">
<h2><a href="./produkte/allgemeiner-industriebedarf">
<img class="fimage" src="http://www.mitsubishi-hartmetall.com/wordpress/wp-content/uploads/2013/07/Fingertip-2.jpg"/>Allgemeiner Industriebedarf</a></h2>
</span>
</div> <!-- featured-boxs -->
<div class="content-ver-sep" style="margin: 0 -30px;"> </div><br /><br /><div class="clear"> </div>
#featured-boxs {display: block;
}
#featured-boxs h2 {
padding: 10px 0 5px;
text-align: center;
text-shadow:-1px -1px 3px #FFFFFF;
}
#featured-boxs img.fimage {
border: 10px solid #EEEEEE;
border-radius: 150px;
display: block;
height: 200px;
margin: 0 auto 10px;
width: 200px;
}
#featured-boxs img.fimage:hover {
border: 10px solid #0093C9;
-webkit-transform:scale(0.97);
-moz-transform:scale(0.93);
-o-transform:scale(0.97);
-ms-transform:scale(0.97);
transform:scale(0.97);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
#featured-boxs p {
text-align: justify;
}
.featured-box,
.featured-box-first {
width:277px;
display:inline;
}
Auf einer Unterseite allerdings sind diese Boxen seltsamerweise untereinander angeordnet, obwohl genau der selbe Code verwendet wurde:
Bitte um Hilfe!