问

如何集中砌体容器

公关活动策划公司_333 发布于 2023-02-12 18:35

容器

我正试图将一个砌筑容器放在页面上.此刻,它与左侧对齐.我的CSS中有margin auto,而JS中的isFitWidth:true,但似乎都没有做任何事情.我也尝试在我的CSS中放置display:block.

这是HTML;




    
    
    Storyville Entertainment




    
    
    Ugly Duckling Organic Farm
 



    
    
    Underdonk
 


    
    
    www.jaeeunlee.com
 


    
    Goindoor
 


    
    Wonderfully Whimsical Cakes

CSS;

.group {
    display: inline-block;
    clear:both;
}

.group:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

#masonry_container {
margin:50px auto;
width:100%;
position:relative;
z-index:2001;
}

.masonry_item {
width:300px;
margin:0 0 20px 0px;
padding:20px;
}

.masonry_item:hover{ 
outline:1px solid white;
}

#masonry_container img {
width:100%;
}

和JS;

var container = document.querySelector('#masonry_container');
var msnry = new Masonry( container, {
    // options
    isFitWidth: true,
    itemSelector: '.masonry_item'
});

我很感激你的帮助!

1 个回答

我今天试图为自己解决这个问题,并认为我会分享一个可能的解决方案.

根据Masonry自己的选项页面"isFitWidth": true似乎是关键

http://masonry.desandro.com/options.html#isfitwidth

这是他们的codepen示例..

http://codepen.io/desandro/pen/nGLvx

这是我的简化和裸骨方法..

小提琴

https://jsfiddle.net/Hastig/xtw113wx/2/ - 代码播放

https://jsfiddle.net/Hastig/xtw113wx/2/embedded/result/ - 全屏

HTML
```
<div class="masonry-container js-masonry"  data-masonry-options='{ "isFitWidth": true }'>
    <div class="image-div">
        <img class="image" src="" >
    </div>
    
</div>
```
CSS
```
.masonry-container {
    margin: 0 auto; /* this is the css that keeps the container centered in page */
}

.image-div {
    float: left;
    width: 230px;
    margin: 5px;
    font-size: 0;
}

.image {
    width: 230px;
    height: auto;
}
```
2023-02-12 18:38 回答

啊4呀么啊4呀

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签