css文字环绕
html:
<div class="wrap-div-topSpacer"></div>
<div class="wrap-div">
<img src="data:image/tineng1.png" alt="">
</div>
<div style="font-size: 16px;text-indent: 2rem;">通过体能测试获得基本数据资料,由此找到幼儿体能训练的更好方法,以促进幼儿体能的提高,测试结果也将为幼儿园调整户外体育活动的组织形式,开展体育区域活动,变“集中统一活动”为“分区自主活动”,变“同年龄班活动”为“混龄班活动”,创设开放性的体育活动环境提供科学数据和对比依据。充分利用测试结果发现问题,“用幼儿感兴趣的方式发展基本动作,提高动作的协调性、灵活性以及平衡性”,逐步形成园本教育特色,打造园所教育品牌,凸现园所文化,为孩子一生运动能力和良好运动习惯打下基础。</div>
css:
div.wrap-div-topSpacer {
width: 0px;
height: 40px;
float: left;
}
div.wrap-div {
float: left;
clear: both;
margin: 10px 25px 0 0;
width: 25%;
text-align: center;
background: #0088cc;
color: #FFF;
}
div.wrap-div-right {
float: right;
width: 50%;
}
页面效果:
css文字环绕的更多相关文章
- css文字环绕图片--遇到的问题及解决方法
一.前言 需要实现一个文字环绕图片的效果,心想so easy嘛. 1)代码部分 <style> .img-left { border: 3px solid #005588; width:3 ...
- HTML/CSS实现文字环绕图片布局
原文: https://blog.csdn.net/yiyelanxin/article/details/75006925 在一个图文并茂的网页上,文字环绕图片可以使布局美观紧凑,如何实现呢?有两种办 ...
- (转)css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果 2.多个div并排显示 3.清除浮动(默认显示)
一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...
- 《css揭秘》下(伪元素,文字背景,垂直居中技巧,文字环绕)
本篇主要记录<CSS3揭秘>一书中后面几章的常用技巧. 1.伪元素换行 先看下HTML代码,如下 <div class="demo1"> <div c ...
- html小知识点汇总(浏览器导航上显示图标、div无高度时试着清除浮动、文字环绕图片、字体加粗、div按百分比分、已有的不合适的class,针对特定的标签进行修改)
1.新点击的网页,在浏览器导航上显示图标: 像这种效果: <head> <meta charset="UTF-8"> <meta name=" ...
- Bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素
本篇主要包括: ■ 添加独立的一行■ 文字环绕■ 图片自适应■ 隐藏元素 添加独立的一行 在id为body的section和id为main的section之间,添加2张图片. 我们发现,新加的 ...
- css文字两端对齐
css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...
- html,CSS文字大小单位px、em、pt的关系换算
html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...
- CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现?
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
随机推荐
- Java 两个日期间的天数计算
在Java中计算两个日期间的天数,大致有2种方法:一是使用原生JDK进行计算,在JDK8中提供了更为直接和完善的方法:二是使用第三方库. 1.使用原生的JDK private static long ...
- JavaScript运行机制的学习
今天在偶然在网上看到一个JavaScript的面试题,尝试着看了一下,很正常的就做错了,然后给我们前端做,哈哈,他居然也顺理成章做的错了,代码大概是这样的 /*1 下面代码会怎样执行?执行结果是什么* ...
- 解决点击cell执行动画导致的重用问题
解决点击cell执行动画导致的重用问题 说明: 动画的细节都是裸露的,并没有封装,靠看官来优化了. 效果: 源码: https://github.com/YouXianMing/UITableView ...
- Linux 软硬链接详解
软链接 软链接: 类似于windows的快捷方式,—>文本文件,但是包含了真实文件的地址 源文件删除,则软连接也删除 软链接可以放在任何文 ...
- TFS使用笔记——合并不同分支的代码
问题描述:我们需要把2.37中改动的代码合并到2.38当中. 查看“Pending Changes”,单击“Change”列排序,查看merge的items,然后选中merge的items,最后“Ch ...
- 网络编程--Socket(套接字)
网络编程 网络编程的目的就是指直接或间接地通过网络协议与其他计算机进行通讯.网络编程中 有两个主要的问题,一个是如何准确的定位网络上一台或多台主机,另一个就是找到主机后 如何可靠高效的进行数据传输.在 ...
- HTML头标签使用-又一次定向,refresh
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- Laravel中如何将单个routes.php分割成多个子文件
随着业务逻辑越来越复杂,routes.php文件也会变得越来越庞大,为了便于管理,我们可以像管理配置文件那样将其分割成多个子文件,这实现起来很简单: // app/routes.php ... // ...
- golang xorm应用
github.com/go-xorm/xorm xorm库 http://www.xorm.io/docs/ 手册 xorm是一个简单而强大的Go语言ORM库. 通过它可以使数据库操作非常简便.xo ...
- Hive学习之路 (八)Hive中文乱码
Hive注释中文乱码 创建表的时候,comment说明字段包含中文,表成功创建成功之后,中文说明显示乱码 create external table movie( userID int comment ...