CSS - 画像が正しく整列していないため、境界がありません

Question

WordPressのウェブサイトは1年以上よく使用されています。おそらく、それは新しいブラウザのバージョンのためです、位置合わせはオフです。

あなたが見ることができるように、各画像は、それぞれのバウンディングボックス内にある必要がありますが、彼らは境界をオフになりましたです。

HTMLコード：

<div class="full-container commercial"> 
 
<div class="container"> 
 
<div id="content" class="clearfix row"> 
 
<div id="main" class="col col-lg-12 clearfix" role="main"> 
 
<article id="post-12" class="clearfix post-12 page type-page status-publish hentry" role="article"> 
 
<section class="post_content"> 
 
<h2>Community</h2> 
 
<ul id="equalize" class="gallery_block commercial"> 
 
<p></p> 
 
<li style="height: 601px;"> 
 
<span class="wp-easy-gallery"> 
 
<a style="cursor: pointer;" title="Senior Apartment" onclick="var images=['http://example.com/wp-content/uploads/2015/02/302-1.jpg', 'http://example.com/wp-content/uploads/2015/02/302-2.jpg', 'http://example.com/wp-content/uploads/2015/02/302-3.jpg', 'http://example.com/wp-content/uploads/2015/02/302-4.jpg']; var titles=['Senior Apartment', 'Senior Apartment', 'Senior Apartment', 'Senior Apartment']; var descriptions=['', '', '', '']; jQuery.prettyPhoto.open(images,titles,descriptions);"> 
 
<img class="dShadow trans" border="0" alt="Senior Apartment" src="http://example.com/wp-content/uploads/2015/02/302-1.jpg"> 
 
<p class="wpeg-gallery-name left">Senior Apartment</p> 
 
</span> 
 
</li> 
 
<li style="height: 601px;"> 
 
<span class="wp-easy-gallery"> 
 
<a style="cursor: pointer;" title="Cultural Centre" onclick="var images=['http://example.com/wp-content/uploads/2015/02/412-1.jpg', 'http://example.com/wp-content/uploads/2015/02/412-2.jpg', 'http://example.com/wp-content/uploads/2015/02/412-3.jpg', 'http://example.com/wp-content/uploads/2015/02/412-4.jpg', 'http://example.com/wp-content/uploads/2015/02/412-5.jpg', 'http://example.com/wp-content/uploads/2015/02/412-6.jpg', 'http://example.com/wp-content/uploads/.../412-14.jpg']; var titles=['Cultural Centre', 'Cultural Centre', 'Cultural Centre', 'Cultural Centre', 'Cultural Centre', 'Cultural Centre', 'Cultural Centre', 'Cultural Centre', 'Cultural Centre', '', 'Cultural Centre', 'Cultural Centre', 'Cultural Centre', 'Cultural Centre']; var descriptions=['', '', '', '', '', '', '', '', '', '', '', '', '', '']; jQuery.prettyPhoto.open(images,titles,descriptions);"> 
 
<img class="dShadow trans" border="0" alt="Cultural Centre" src="http://example.com/wp-content/uploads/2015/02/412-1.jpg"> 
 
<p class="wpeg-gallery-name left">Cultural Centre</p> 
 
</span> 
 
</li> 
 
<li style="height: 601px;"> 
 
<span class="wp-easy-gallery"> 
 
<a style="cursor: pointer;" title="Community Centre" onclick="var images=['http://example.com/wp-content/uploads/2015/02/541-1.jpg', 'http://example.com/wp-content/uploads/2015/02/541-2.jpg', 'http://example.com/wp-content/uploads/2015/02/541-3.jpg', 'http://example.com/wp-content/uploads/2015/02/541-4.jpg', 'http://example.com/wp-content/uploads/2015/02/541-5.jpg', 'http://example.com/wp-content/uploads/2015/02/541-6.jpg', 'http://example.com/wp-content/uploads/...Community Centre', 'Community Centre', 'Community Centre', 'Community Centre', 'Community Centre', 'Community Centre', 'Community Centre', 'Community Centre', 'Community Centre', 'Community Centre', 'Community Centre', 'Community Centre']; var descriptions=['', '', '', '', '', '', '', '', '', '', '', '', '', '']; jQuery.prettyPhoto.open(images,titles,descriptions);"> 
 
<img class="dShadow trans" border="0" alt="Community Centre" src="http://example.com/wp-content/uploads/2015/02/541-1.jpg"> 
 
</a> 
 
<p class="wpeg-gallery-name left">Community Centre</p> 
 
</span> 
 
</li> 
 
<li style="height: 601px;"> 
 
<li style="height: 601px;"> 
 
<li style="height: 601px;"> 
 
<p class="lead"></p> 
 
</ul> 
 
</section> 
 
<footer> 
 
</article> 
 
</div> 
 
</div> 
 
</div> 
 
</div

CSS：

.wp-easy-gallery { 
 
    display: inline-block; 
 
    float: left; 
 
    margin-right: 5px; 
 
} 
 
.wp-easy-gallery a { 
 
    box-shadow: none !important; 
 
} 
 
.wp-easy-gallery img { 
 
    border: 1px solid #CCCCCC; 
 
    display: inline-block; 
 
    opacity: 0.7; 
 
    padding: 2px; 
 
    position: relative; 
 
} 
 
.wp-easy-gallery:hover img.dShadow { 
 
    box-shadow: 2px 2px 5px #888888; 
 
} 
 
.wp-easy-gallery:hover img { 
 
    opacity: 1; 
 
} 
 
.wp-easy-gallery img { 
 
    transition: opacity 0.3s ease-in-out 0s; 
 
} 
 
.wpeg-gallery-name.center { 
 
    text-align: center; 
 
} 
 
.wpeg-gallery-name.right { 
 
    text-align: right;

これは、前のプログラマによって行われました。誰かが間違っていた可能性のある箇所や見える箇所を知らせることができれば、感謝するはずです。

ありがとうございます。

Answer 1

私はしばらくの間、CSSに取り組んでいません。あなたの助けをありがとう。

私は

height: 100%; 
width: 100%; 

に-簡単ギャラリーを.wpとFirebugの上

<li> 

に

<li style="height: 601px;" 

を変更するには、次を追加して、うまく整列するために開始します。

私はWordPressに慣れていないので、私はそれを掘り下げてCSSをどこで変更できるかを調べる必要があると思います。異なるブラウザは異なる動作をするため、ここから始めて別のブラウザでテストすることができます。