CSS代码如何设置图片周围字体环绕

实现文字环绕效果需要先设定float的参数,如果图片需要左对齐设为left,若右对齐则为:right。此外,我们还可以根据需要设置图片和文字间隔的空间,同样适用CSS的padding。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文字环绕</title>
<style>
div {
width:300px;
border:1px solid green
}
img {
float:left;
width:120px;
height:120px
}
</style>
</head>
<body>
<div>
<img src="img.gif" alt="图片" />
文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</div>
</body>
</html>

时间: 2024-10-04 13:00:40

CSS代码如何设置图片周围字体环绕的相关文章

css代码添加背景图片常用代码

css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; height: 0px; margin: 20px 0px;"> 2 背景图片 {background-image: url(url)|none} 3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} 4 背景固定 {

在代码中设置TextView 的字体颜色

常用的两种方法: 1.在res文件夹下的dimens.xml .styles.xml 或者strings.xml文件中添加<color name = "green">#00ff00</color>标签,或则在res文件夹下新建color.xml文件,在该文件中添加根标签<resource></resource>,再在根标签里添加<color>便签,然后可以在代码中通过以下方式设置: textView.setTextColor(

在java代码中设置TextView的字体大小,单位设为sp

要实现的效果如标题. 在dimen.xml文件中设置了<dimen name="text_size">18sp</dimen> 开始的时候,通过sizeTv.setTextSize(getResource().getDimension(R.dimen.text_size))进行设置. 此时使用as的同学会发现,as提示的getDimension返回的值即为18sp.看着挺正常的. 但是跑出来的实际效果,会比在布局文件中直接设置18sp的字体来的大!! 暂时没去弄

TextView之代码中设置图片的操作

/** * 实例化首页订单通知条 */ private TextView getTextView() { // 实例化一个线性布局的参数 LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams( LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT); lp.setMargins(0, 12, 0, 0); textView = new TextView(HomeActivity.

css网页中设置背景图片的方法详解

css网页中设置背景图片的方法详解 在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {background-color:数值}2,背景图片 {background-image: url(URL)|none}3,背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4,背景固定 {background-attachment

页面定制CSS代码初探:页面变宽 文本自动换行 图片按比缩放

一.初识博客 初写博客,先在设置里选了个喜欢的模板 第一眼就爱上了呢!那极简的风格,我喜欢!!但是,应用后,却发现... 纳尼!模板上右侧那张漂亮的图片呢?!我的怎么什么都没有.没有图片好难看啊,瞬间无爱了,设置里找了下,->博客侧边栏公告 <-,在这里,放了张宽200px的图,好看多了马上,还是有图才不会那么单调~ 二.认识CSS 过了几天,打算写篇博,发现了一个重大的问题,怎么默认的宽度这么窄?那我放图片怎么办,而且,2边留那么多空白不浪费吗,留个5%就够了吧.于是乎,开始了2天的全折腾.

css体验优化之图片容器设置宽高比

需求 我们在做web页面的时候,经常会有一些图片列表,例如下图的视频列表以及表情列表:        需求要求: 1. 列表是responsive的,在不同宽度的浏览器下面,图片要自适应容器宽度 2. 图片在自适应的过程中,图片的长宽比要保持不变 常规解决方案 在container宽度固定的需求中(比如PC版页面),我们直接设置图片容器或者图片为固定的宽高就好了,比如: 1 img{ 2 width:330px; 3 height:180px; 4 } 但是这个不能满足需求,为了满足上面的需求两

如何利用CSS代码使图片和文字在同一行显示且对齐

对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同一行显示且对齐呢? 对于这种现象,方法有3种: 1.通过添加css的“vertical-align:middle;”: 2.如果图片是背景图片,可以在css中设置背景图片,然后设置文字的padding属性: 3.把文字和图片分别放入不同的div中. 经过多次的测试,上面三种方法都可以让图片和文字在同

Css设置图片垂直居中

说明:样式设置主要是针对图片的父级元素,并非图片元素本身. Css代码[图片父级点的样式]: <style> .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/ *font-f