html - 如何以网格或 block 格式显示文本和图像？

Question

我有几个图像和文本，我想以特定格式排列，但是，尽管尝试了 display: inline-block 并使它们 float ，但我无法完全达到我需要的效果.利润率有所帮助，但他们并没有做到这一点。

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

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;
}