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

1

这是带有解释的链接，这是工作示例。

#slide5_wrapper{
text-align: justify;
}

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

#slide5_wrapper div{
display: inline-block;
}

希望能帮助到你。

于 2014-04-23T05:27:36.933 回答
0

这是怎么回事：

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

?

于 2013-11-03T14:16:33.767 回答