Question

我一直在谷歌搜索这个并找到了很多答案，但是没有一个能在我的情况下工作，因为其中一个div是一个有多个图像的画廊。基本上，我正试图将图像和另一个图库放在彼此相邻的页面中心。

HTML片段：

<div class="sides">
    <div class="featured-item">
        <p class="featured-label">This weeks Featured Item is Mint Chip Cupcakes!</p>   <a href="#"><img src="img/mintchip.jpg"></a>

    </div>
    <div class="sides">
        <div class="flexslider">
            <ul class="slides">
                <li>
                    <img src="img/1.jpg" alt="A Happy Birthday Mario Cake">
                </li>
                <li>
                    <img src="img/2.jpg" alt="A Pizza Hut Cake">
                </li>
                <li>
                    <img src="img/5.jpg" alt="A Makeup Cake">
                </li>
                <li>
                    <img src="img/6.jpg" alt="A Makeup Cake">
                </li>
                <li>
                    <img src="img/156.jpg" alt="A Makeup Cake">
                </li>
            </ul>
        </div>
    </div>
</div>

CSS：

.sides {
    display: inline-block;
    text-align: center;
    max-width: 612px;
}

我也尝试单独使用每个div并使用margin-left，margin-right但没有运气。 max-width为612px，因为这是图库的max-width。我尝试将其设置为1000，它显示了大量的图像。 结果： http://i.imgur.com/se8DwyL.png 一个图像位于另一个图像的顶部，它们位于屏幕的左侧。

Answer 1

首先，您正在使用＆＃34;幻灯片＆＃34;看起来像无关的div的类名。我改变了;它只会让你感到悲伤。接下来，包装器应该具有设置的宽度并且以自动边距为中心 -

.my-Wrapper-class {
    width:960px;
    margin:0px auto;
}

现在浮动你的照片和幻灯片放映的两个div -

.featured-item {
    float:left;
}

.flex-slider {
    float:right;
}

您可以为其中任何一个添加边距，直到它按照您的喜好间隔。

如何将两个div放在一起--HTML / CSS

1 个答案: