html怎样在图片右侧写文字

1、首先先准备图片素材和文字语言。

2、添加CSS样式修饰，最外面的大框添加宽度居中。

3、现在的图文是这样排版。

4、想要将图文左右排版，无非是定位或者浮动，对图片块和文字块都添加了浮动效果后。

5、如图添加浮动后，文字部分因为文字太长超出了他所用那的范围，所以被挤到到了下行的右侧。

6、这时候，将文字区域设置下宽度，不让他超过最大范围就行了，如图设置宽度为450px。

7、然后再预览效果图，就完美解决了。

常见的三种，一种是标签内联的书写方式，不推荐使用

另外两种都是相对比较常用的，具体看代码吧

方法1：标签内联的书写方式

<div onclick="alert('点击此处d窗')">HTML5学堂 - - 数百篇原创文章分享 </div>

方法2和方法3：

<div id="con">通过id获取标签，之后为标签绑定事件</div>

<script>

    var con = document.getElementById('con')

    con.onmouseover = function(){

        alert('鼠标移入d出这个')

    }

    con.addEventListener('mouseout', function(){

        alert('鼠标移出d出这个')

    }, false)

</script>

用js 参考一下这个代码

<script>

window.onload=function () {

var Odiv=document.createElement("div")//创建一个div

var Ospan=document.createElement("span") //创建一个span

Odiv.style.cssText="width:200pxheight:200pxbackground:#636363

text-align:centerline-height:220px" //创建div的css样式

//Odiv.id="box" //创建div的id为box

//Odiv.className="Box" //div的class为Box

Odiv.appendChild(Ospan) //在div内创建一个span

document.body.appendChild(Odiv) //在body内创建一个div

}

</script>

---