Question

我有一个网站，我试图让一系列的区块彼此相邻并且彼此相邻。目前块是内联的，我想停止它并且堆叠块彼此相邻并且彼此叠加。

有问题的网站和网页：http://cityofguilds.com/profile.php

我的CSS：

.profile_containers {
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
    margin-bottom: 5px;
    width: 48%;
    padding: 5px;
    border: 1px solid #222;
}

HTML：

<div class="profile_containers">
    <h2>User Info</h2>
    Text Here
</div>
<div class="profile_containers">
    <h2>About Me</h2>
    Text Here
</div>
<div class="profile_containers">
    <h2>Badges</h2>
    Text Here
</div>
<div class="clear"></div>

谢谢你们

Answer 1

我建议让两个eight columns彼此相邻..

HTML

        <div class="container">                
            <div class="eight columns">
                <div class="profile_containers">
                    <h2>User Info</h2>
                    <strong>Name:</strong> Ben<br>         
                    <strong>Level:</strong> 1<br>
                    <strong>Gender:</strong> Male<br>         
                    <strong>Country:</strong> United Kingdom<br>         
                    <strong>Started Playing:</strong> 21st July 2013<br>
                    <strong>Interests:</strong> Programming, Magic: The Gathering and gaming.<br>         
                    <strong>Guild:</strong> Shinkaku     
                </div>
                <div class="profile_containers">
                    <h2>Badges</h2>
                    Lorem ipsum dolor sit amet and stuff... Lorem ipsum dolor sit amet and stuff... Lorem ipsum dolor sit amet and stuff... 
                </div>
            </div>
            <div class="eight columns">
                <div class="profile_containers">
                    <h2>About Me</h2>
                    Maecenas tincidunt fermentum nisi, sed convallis sapien aliquet a. Proin venenatis pharetra nisi, sit amet ultricies nibh hendrerit in. Donec et metus augue. Praesent fringilla justo non eros accumsan, venenatis posuere justo aliquet. Nullam et tortor fermentum, sollicitudin augue eget, ornare augue. Sed interdum imperdiet ullamcorper. Proin nec mattis velit. Donec sed augue nec mauris commodo lacinia sit amet ac purus. Maecenas faucibus bibendum nisi sit amet fringilla. Donec vel urna nec massa molestie tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut at euismod neque. In venenatis, augue lobortis bibendum pretium, velit est ornare nunc, a blandit lectus velit eu tortor. Quisque consequat odio at arcu accumsan, vel dapibus ipsum aliquam.    
                </div>
            </div>
        </div>

CSS

.profile_containers {
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 5px;
    border: 1px solid #222;
 }

Answer 2

由于你的块大小不同，让它们适合并相互堆叠是一件有点棘手的事情。

如果您可以为固定的块设置高度，那么您可以将它们浮动到css中，它们将自动为您输出网格。

所以你的css看起来像这样：

.profile_containers{
    float:left;
    margin: 0 5px 5px 0;
    width:48%;
    padding: 5px;
    border: 1px solid #222;
    /* consider adding box sizing to keep the integrity of your width because the padding will mess that up*/
    box-sizing : border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}

如果此方法可行，但如果div的高度不同则会中断。让我们觉得舒服的最简单方法就是将它们分成不同的列并将你的div放在列中

<div class="profile_container_column">
    <div class="profile_container"></div>
    <div class="profile_container"></div>
</div>
<div class="profile_container_column">
    <div class="profile_container"></div>
    <div class="profile_container"></div>
</div>

并在列上使用css float:left。

或者使用masonry等javascript库来管理您的定位。

CSS Inline-Blocks，删除每个元素下方的空间

2 个答案: