如何以网格或块格式显示文本和图像？

Question

我有几张图片和文字，我想以特定格式排列，但是，尽管尝试display: inline-block并浮动它们，我仍然无法达到我需要的效果。保证金有所帮助，但他们并没有这么做。

我想要一张图片，然后是旁边的一些文字，然后是下面的文字，然后是文字，然后是该文字旁边的图片。如何实现下图所示的布局？

h4 {
    display: inline-block;
    font-family: helvetica;
    font-size: 15px;
    color: black;
}

<div class= "container">
    <h4>
        <center>
            <img src="Jeff Crowd.jpg" alt="Customer Service">
            <p>With a wide selection of batteries and generators, protective and decorative riding gear, helmets and accessories to fit any make and model, Great Plains is your local stop for all antique and modern motorcycle needs.</p>
            <p>With a dedicated service department comprising over 50 years experience with all makes and models, Great Plains Cycle can accomdodate any service request with efficiency and professional expertise. For any service requests, please contact us at info@example.com or stop in to speak to a professional.</p>
            <img src="Tool Box Resize.jpg"alt="Tool Box">
        </center>
    </h4>
</div>

Answer 1

据我了解，您应该使用float作为您的图片：

#container img
{
    float: left;
}

请查看http://www.homeandlearn.co.uk/WD/wds4p6.html

编辑：

<div class= "container">
    <h4>
        <center>
            <img id="img1" src="Jeff Crowd.jpg" alt="Customer Service">
            <p>With a wide selection of batteries and generators, protective and decorative riding gear, helmets and accessories to fit any make and model, Great Plains is your local stop for all antique and modern motorcycle needs.</p>
            <p>With a dedicated service department comprising over 50 years experience with all makes and models, Great Plains Cycle can accomdodate any service request with efficiency and professional expertise. For any service requests, please contact us at info@greatplainscycle.com or stop in to speak to a professional.</p>
            <img id="img2" src="Tool Box Resize.jpg"alt="Tool Box">
        </center>
    </h4>
</div>

和CSS：

#img1
{
   float : left;
}

#img2
{
   float : right;
}