css 左图片 右文字

网页设计中，图片和文字的组合是非常常见的一种布局。其中，左侧图片，右侧文字也是一种受欢迎的设计模式。这种设计可以使页面看起来更加美观、清晰、易于阅读。

实现这种布局可以使用 CSS。下面是实现代码：

style type="text/css">
.container {
    width: 80%;
    margin: 0 auto;
}
.image-box {
    float: left;
    width: 50%;
    margin-right: 20px;
}
.image-box img {
    width: 100%;
    height: auto;
    display: block;
}
.text-box {
    float: left;
    width: 50%;
}
    /style>
    div class="container">
    div class="image-box">
    img src="image.jpg" alt="图片">
    /div>
    div class="text-box">
    p>
    在右侧位置添加一些文字内容，在右侧位置添加一些文字内容，在右侧位置添加一些文字内容，在右侧位置添加一些文字内容，在右侧位置添加一些文字内容，在右侧位置添加一些文字内容。/p>
    /div>
    /div>
    

上述代码中，首先定义了一个 .container 容器，用来包含整个页面。然后分别定义了 .image-box 和 .text-box 两个盒子，其中 .image-box 盒子包含图片，定义 float: left; 实现图片与文字排列在同一行，同时 margin-right: 20px; 用来隔开图片和文字，增加排版的美感。

在 .image-box 盒子内的 img 元素，定义了宽度为 100% 以及高度为 auto，实现了图片的自适应。.text-box 盒子内增加了一段文字内容，用来占据剩余的页面宽度。

这就是使用 CSS 实现左侧图片，右侧文字布局的方式。通过调整样式细节，可以实现更多样化的效果，让页面更具吸引力和可视性。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！