css图片文字左右结构

在前端开发中，常常遇到需要将图片和文字显示在同一页面上，而且要求文字在图片的左右两侧显示。这个时候我们就需要使用CSS来控制页面的样式了。下面我们将会介绍如何使用CSS实现图片文字左右结构。

    <div class="container">
        <img src="image.jpg" alt="image">
        <div class="text">
            <p>这里是文字内容。</p>
        </div>
    </div>

    .container {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    img {
        width: 50%;
        height: auto;
        margin-right: 50px;
    }

    .text {
        width: 50%;
    }

    p {
        font-size: 16px;
        line-height: 24px;
    }

上面的代码主要分为HTML部分和CSS部分，我们可以看到HTML部分使用了一些基本的标签，包括div、img和p。其中，我们把图片和文字放在一个div容器中，图片是img标签，文字是p标签。而CSS部分则定义了这些标签的样式。

通过CSS控制容器的宽度为100%，同时使用flex布局使得容器内部的元素水平居中对齐。图片的宽度占据了容器的50%，高度根据宽度自适应，同时与文字之间有一个50px的右边距，这样就能达到文字在图片左侧的效果。而文字则占据了容器的另外50%宽度，这样就能达到文字在图片右侧的效果。另外，我们还对文字的字号和行高进行了一些基本的设置。

总体来说，使用CSS对于图片和文字的排版和样式进行调整是非常简单的。只要掌握基本的CSS布局和样式调整方法，就能轻松实现各种网页效果。