html - 如何将两个 div 并排放置 -HTML/CSS

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

首先，您正在为看似无关的 div 使用“幻灯片”类名称。我会改变它；这只会让你伤心。接下来，包装器应具有设置的宽度并以自动边距居中 -

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

现在 float 两个包含您的图片和幻灯片的 div -

.featured-item {
    float:left;
}

.flex-slider {
    float:right;
}

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