css 图片 文字 在一行显示

在网页设计中，图片和文字的排版布局是非常重要的部分。而将图片和文字在同一行上显示，则可以更好地控制页面的版面和风格，使页面更加美观和易于阅读。

在实现图片和文字在同一行显示时，可以使用CSS的浮动（float）属性。首先，将图片和文字分别放在两个不同的div内，然后为两个div设置浮动属性，使它们在水平方向上排列。具体的CSS代码如下：

<style>
    .img{
        float: left;
        margin-right: 10px;
    }
    .text{
        float: left;
    }
</style>

<div class="container">
    <div class="img">
        <img src="example.jpg">
    </div>
    <div class="text">
        <p>这里是一段文字说明，可以根据实际情况修改。</p>
    </div>
</div>

在上述代码中，我们使用了float属性为两个div设置浮动，将图片和文字放置在同一行显示。另外，为了避免图片和文字之间出现奇怪的间隔，我们使用了margin-right属性对图片设置了一个右侧的间距。

总的来说，通过以上的方法，我们可以轻松地实现图片和文字在同一行显示的效果。而如果你想要实现更加复杂的排版布局，也可以使用一些CSS框架或者库，如Bootstrap、Semantic UI等，来快速实现复杂页面的布局设计。