0

皆さんこんにちは、

私は3つのdivを互いに等距離にしようとしています。DIV の幅は、その中の IMG ファイルによって決まります。

コンテナ div をページの 80% 幅にすることに成功し、中央揃えになりました。

ただし、この内部の DIV は互いに等距離にありますが (私が見る限り)、それらが含まれる div に従って中央に配置されません。

HTML:

<div class="slide" id="slide5" data-slide="5" data-stellar-background-ratio="0"> 

<div class="slide5_wrapper">

    <div class="slide5_recd2011">
        <a href="images/foto2011/_MG_0934.JPG" data-lightbox="RECD2011" title="Lezingen"><img src="images/RECD2011_thumbnail.png"></a>
        <a href="images/foto2011/_MG_0972.jpg" data-lightbox="RECD2011" title="Lunch"></a>
    </div>        

    <div class="slide5_recd2012">
        <a href="images/foto2011/_MG_0934.JPG" data-lightbox="RECD2012" title="Lezingen"><img src="images/RECD2011_thumbnail.png"></a>
    </div>

    <div class="slide5_recd2013">
        <a href="images/foto2011/_MG_0934.JPG" data-lightbox="RECD2013" title="Lezingen"><img src="images/RECD2011_thumbnail.png"></a>
    </div>

</div>

そしてCSS：

.slide5_wrapper{
margin: 0 auto;
width:80%;
position: relative;
max-height:80%;
top:10%;
text-align:justify;

}



.slide5_recd2011, .slide5_recd2012, .slide5_recd2013 {
margin: 10px;
height:auto;
border-radius:15px;
vertical-align: top;
display:inline-block;
}

#slide5_wrapper:after {
content: '';
width:100%;
display:inline-block;
}

私の恐ろしい用語の使用 (ラッパー/コンテナー w/e) ですみません。これが機能することを望んでいます。

私は本当のウェブサイトのコーダーではありません.ただ学ぼうとしているだけです.私はこのプロジェクトを引き受けましたが、あまり資格がありません.仕事場か何か）。

前もって感謝します

4

2 に答える 2

0

これについてはどうですか：

.slide5_recd2012{
    width: 33%;
    float:left;
    box-sizing: border-box;
    padding: /*some padding you need */ 0;
}

?

于 2013-11-03T14:16:33.767 に答える