Question

我有一个自己显示的图片网格，但我不能将这个网格放在侧边栏旁边。

要构建网格，我将图片放在<ul>中，并设置<li> display: inline-block的属性。

当尝试将此网格合并到侧边栏div旁边时，它不会放置在侧边栏的旁边;相反，它在侧边栏下面。放置文本做我想要的。现在，当我在display上省略float和<li>时，图片显示在正确的位置（侧边栏旁边），但我希望图片以网格显示，而不是一栏。

JSFIDDLE LIVE DEMO

这是我的CSS

ul.cats li {
    width: 200px;
    display: inline-block;
    /* will not display to the right of sidebar */

    /* float: left; */
    /* no good either */

    text-align: center;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    border: 1px solid black;
}
.site_body_container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
}
.site_sidebar {
    position: relative;
    float: left;
    height: 95%;
    color: white;
}
.site_content {
    position: relative;
    float: left;
    padding: 10px;
    border: 5px solid blue;
    height: 100%;
}

和HTML

<div class="site_body_container">
    <div class="site_sidebar">
        <ul>
            <li>Sidebar 1</li>
             ... etc ...
        </ul>
    </div>
    <div class="site_content">cats
        <div class="container">
            <div id="links">
                <ul class="cats">
                    <li> <a href="#" title="kitty"><img src="http://placekitten.com/50/30" /><br>Kitty</a>

                    </li>
                    <li> <a href="#" title="kitty"><img src="http://placekitten.com/50/30" /><br>Kitty</a>
                      ... etc ...
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Answer 1

您需要明确设置包含图片的容器的宽度，例如：

.site_content {
    position: relative;
    float: left;
    padding: 10px;
    border: 5px solid blue;
    height: 100%;
    width: 450px;

}

否则，它会占据整个宽度，导致它突破到左侧边栏下方的下一行。

这是一个小提琴：http://jsfiddle.net/9Wg3T/8/

Answer 2

经过一番搜索后，我找到了另一种解决方案，这就是我目前正在使用的解决方案。

我可以使侧边栏的宽度变量（由其内容的大小决定）和＆＃34;猫＆＃34; gallery将剩余的宽度占据侧边栏的右侧：

.site_sidebar {
    position: relative;
    float: left;
    height: 95%;
    background-color: #eeffff;
    padding: 0;
}

.site_content {
    position: relative;
    padding: 0;
    overflow: hidden;
}

诀窍是将.site_content的溢出设置为hidden。 this answer.

中的说明

使用内联块显示的无序列表的意外放置

2 个答案: