html - 试图将 4 张图片放入网格中，但看不到我做错了什么

Question

这就是我想要实现的http://i.imgur.com/Q4OYEfX.jpg

但是我似乎无法让图片对齐。我在前几页中已经完成，但在这一页上没有，并且应用相同的技术不起作用。这是我的 HTML:

        <div class="container clearfix">

            <img src="images/food.gif" alt="Our Food" id="food-image">

            <div id="food">

                <div id="food-description">

                    <p>What better way to complement your wine other than food?
                    That’s right nothing. Unless it’s a large pile of money or a yacht.
                    Unfortunately we don’t have either of these so you’ll have to make
                    do with our varied selection of food.</p>

                    <div class="food-grid">

                        <img src="images/pringles.jpg" alt="Picture of our Pringles" class="food-pictures">
                        <img src="images/chocolate.jpg" alt="Picture of our Chocolate" class="food-pictures">
                        <img src="images/hampers.jpg" alt="Picture of our Hampers" class="food-pictures">
                        <img src="images/happy-shopper.jpg" alt="Picture of our Happy Shopper Products" class="food-pictures">

                    </div><!--end of food-grid"-->

                    <p>Why not have some Cadbury’s with your Merlot? Or some
                    Pringles and salsa dip with your Pinot Grigio? On the
                    other hand, maybe you’re looking for a gift for a chocoholic?
                    They would love a Cadbury’s Milk Tray or Nestle Dairy Box.
                    Pair that with our Chocoholic Pinotage and you’re golden.</p>

                </div><!--end of food-description-->



            </div><!--end of food-->

        </div><!--end of container-->

    </div><!--end of content-->

这是我的 CSS:

#food-image {
display: block;
margin: 25px auto 50px;
}

#food-description {
font-size: 35px;
color: #78035c;
line-height: 38px;
text-align: center;
}

.food-grid {
text-align: center;
}

.food-pictures {
display: inline-block;
}

任何人都可以告诉我我做错了什么吗？

Answer 1

试试这个:

.food-pictures {
display: inline-block;
    width:50%;
    float:left;
}

工作示例:http://jsfiddle.net/y9fyucyz/

如果你想在图片中添加间隙。喜欢

.food-pictures {
    display: inline-block;
        width:45%;
        margin:1%;
        float:left;
}

您可以使用 css 边距。希望对您有所帮助。