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边距。希望它有所帮助。

试图将4张图片放入网格但却无法看到我做错了什么

1 个答案: