Css 简明教程
CSS - float Property
CSS float 属性控制页面上内容的位置和格式。它将一个元素定位在容器的右侧或左侧，允许文字和其他内联元素环绕它。
float 属性使用块布局，因此在某些情况下会调整 * display* 属性的计算值：
Specified value |
Computed value |
inline |
block |
inline-block |
block |
inline-table |
table |
table-row |
block |
table-row-group |
block |
table-column |
block |
table-column-group |
block |
table-cell |
block |
table-caption |
block |
table-header-group |
block |
table-footer-group |
block |
inline-flex |
flex |
inline-grid |
grid |
本章讨论如何使用浮动属性。
Possible Values
以下是浮动属性可以使用的所有可能的值：
-
none ：元素不浮动。这是默认值。
-
left ：元素浮动到其容器的左侧。
-
right ：元素浮动到其容器的右侧。
-
inline-start ：元素浮动到其容器块的开始侧。（对于 ltr 脚本是其左侧，对于 rtl 脚本是其右侧）。
-
inline-end ：元素浮动到其容器块的结束侧。（对于 ltr 脚本是其右侧，对于 rtl 脚本是其左侧）。
Applies to
所有元素都有，但如果值 display 为无，则无效。
Syntax
float = left | right | inline-start | inline-end | none我们不能将元素浮动到容器的中心、顶部或底部——只能进行向左或向右浮动。
以下示例演示了浮动属性及其值的使用：
<html>
<head>
<style>
div {
margin: 5px;
width: 50px;
height: 150px;
}
.left {
float: left;
background: yellow;
}
.right {
float: right;
background: cyan;
}
.inherit{
float: inherit;
background: pink;
}
</style>
</head>
<body>
<div class="left">1</div>
<div class="right">2
<div class="inherit">3</div>
</div>
<p>There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration insome form, by injected humour,
or randomised words which don't look even slightly believable.
</p>
</body>
</html>CSS Float - Equal Width Columns
我们可以使用 float: right 属性在容器右侧浮动两个网格框，从而创建两个宽度相等的双栏布局。
示例如下：
<html>
<head>
<style>
.grid-box {
float: right;
width: 50%;
padding: 30px;
box-sizing: border-box;
text-align: center;
}
.grid-container::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h4>The first red color grid box is placed on the right side.</h3>
<div class="grid-container">
<div class="grid-box" style="background-color:#f0610e;">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration insome form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<div class="grid-box" style="background-color:#86f00e;">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration insome form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
</div>
</body>
</html>CSS Float - Equal Height Columns
使用 float: left 属性在容器左侧浮动两个网格框，创建两个高度相等、简单的双栏布局。
示例如下：
<html>
<head>
<style>
.grid-box {
float: left;
width: 50%;
height: 200px;
padding: 30px;
box-sizing: border-box;
text-align: center;
}
.grid-container::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h4>The first red color grid box is placed on the left side.</h3>
<div class="grid-container">
<div class="grid-box" style="background-color:#f0610e;">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration insome form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<div class="grid-box" style="background-color:#86f00e;">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
</div>
</body>
</html>CSS Float - Images Next To Each Other
可以使用浮动元素创建简单的四栏图像布局。 float: right 属性将图像定位到容器内的右侧。
示例如下：
<html>
<head>
<style>
.grid-box {
float: right;
width: 25%;
padding: 3px;
box-sizing: border-box;
text-align: center;
}
.grid-container::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h4>The first image is placed on the right side, while the rest of the images are also right aligned within the
container.</h4>
<div class="grid-container">
<div class="grid-box">
<img class="tutimg" src="images/orange-flower.jpg" width="100%" height="50%" />
<p>Orange color flower</p>
</div>
<div class="grid-box">
<img class="tutimg" src="images/see.jpg" width="100%" height="50%" />
<p>see</p>
</div>
<div class="grid-box">
<img class="tutimg" src="images/tree.jpg" width="100%" height="50%" />
<p>Tree</p>
</div>
<div class="grid-box">
<img class="tutimg" src="images/red-flower.jpg" width="100%" height="50%" />
<p>Red color flower</p>
</div>
</div>
</body>
</html>CSS Float - Flexible Boxes
要在灵活容器中创建两栏布局，可以使用 display: flex 属性使容器成为 flex 容器，并且 flex-nowrap 属性确保即使缩小视窗宽度，flex 项也保持在单行中。
示例如下：
<html>
<head>
<style>
.grid-container {
display: flex;
flex-wrap: nowrap;
background-color: #f0610e;
}
.grid-box {
width: 50%;
padding: 30px;
box-sizing: border-box;
text-align: center;
background-color: #86f00e;
margin: 15px;
}
.grid-container::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h4>Resize the browser window to see the effect.</h3>
<div class="grid-container">
<div class="grid-box">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
insome form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<div class="grid-box">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
</div>
</body>
</html>CSS Float - Navigation Menu
可以使用 float 属性和 float: right 属性创建带有超链接列表的水平菜单。菜单链接使用 float: right 属性浮动到页面右侧。
示例如下：
<html>
<head>
<style>
ul {
overflow: hidden;
background-color: #86f00e;
list-style-type: none;
}
li {
float: right;
}
li a {
display: block;
color: #000000;
padding: 15px;
text-decoration: none;
}
.active-link {
background-color: #7b8fc6;
}
</style>
</head>
<body>
<ul>
<li><a href="#tutorials" class="active-link">Tutorialspoint</a></li>
<li><a href="#home">Home</a></li>
<li><a href="#articles">Articles</a></li>
<li><a href="#courses">Courses</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>CSS Float - Web Layout
您还可以使用 float 属性浮动网站布局的内容。
在以下示例中，我们可以将导航菜单浮动到页面右侧，按钮浮动到左侧或右侧，以及一个浮动到右侧的图像。
示例如下：
<html>
<head>
<style>
ul {
overflow: hidden;
background-color: #86f00e;
list-style-type: none;
margin: 5px;
padding: 0;
}
li {
float: right;
}
li a {
display: block;
color: #000000;
padding: 15px;
text-decoration: none;
}
.active-link {
background-color: #7b8fc6;
}
.grid-container {
display: flex;
flex-wrap: nowrap;
}
.grid-box {
width: 100%;
height: 400px;
padding: 50px;
box-sizing: border-box;
text-align: center;
margin: 5px;
background-color: #f0ac0e;
}
.grid-container::after {
content: "";
clear: both;
display: table;
}
.btn1 {
background-color: #0e77f0;
padding: 10px;
font-size: medium;
width: 90px;
border: none;
float: right;
margin: 10px;
}
.btn2 {
background-color: #0e77f0;
padding: 10px;
font-size: medium;
width: 90px;
border: none;
float: left;
margin: 10px;
}
.image-container {
background-color: #f00ed2;
padding: 10px;
margin: 5px;
}
.images {
float: right;
width: 25%;
padding: 3px;
box-sizing: border-box;
text-align: center;
}
.image-container::after {
content: "";
clear: both;
display: table;
}
.footer {
padding: 20px;
text-align: center;
background: #67a482;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#tutorials" class="active-link">Tutorialspoint</a></li>
<li><a href="#home">Home</a></li>
<li><a href="#articles">Articles</a></li>
<li><a href="#courses">Courses</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
<div class="grid-container">
<div class="grid-box">
<h1>Tutorialspoint</h1>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
insome form, by injected humour, or randomised words which don't look even slightly believable. There
are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
<button class="btn1">HTML</button>
<button class="btn1">CSS</button>
<button class="btn2">Bootstrap</button>
<button class="btn2">React</button>
</div>
</div>
<div class="image-container">
<div class="images">
<img class="tutimg" src="images/orange-flower.jpg" width="100%" height="30%" />
</div>
<div class="images">
<img class="tutimg" src="images/see.jpg" width="100%" height="30%" />
</div>
<div class="images">
<img class="tutimg" src="images/tree.jpg" width="100%" height="30%" />
</div>
<div class="images">
<img class="tutimg" src="images/red-flower.jpg" width="100%" height="30%" />
</div>
</div>
<div class="footer">
<h3>© 2023 Tutorialspoint</h3>
</div>
</body>
</html>CSS Float - Paragraph
可以在容器内浮动一个段落，并且容器中的其他元素将环绕它。
示例如下：
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 5px;
background-color: #86f00e;
font-size: large;
}
p {
float: right;
width: 150px;
height: 50px;
margin: 0 1em 1em;
padding: 5px;
text-align: center;
border: 2px solid #000000;
background-color: #f0610e;
}
</style>
</head>
<body>
<div>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum. <p>Tutorialspoint <br>CSS Float</p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle
of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
</div>
</body>
</html>CSS Float - Images With Margin
通过设置 float 和边距属性在容器内浮动图像，并且容器中的其他元素将环绕它。
示例如下：
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 5px;
background-color: #86f00e;
}
.tutimg {
float: left;
border: 3px solid #f0610e;
margin: 10px;
width: 150px;
height: 80px;
}
</style>
</head>
<body>
<div>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
<img class="tutimg" src="images/tutimg.png" />
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle
of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
</p>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle
of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
<img class="tutimg" src="images/tutimg.png" />
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are
</p>
</div>
</body>
</html>CSS Float - No Floating
要防止图像浮动，可以将 float 属性设置为 none 值。
示例如下：
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 5px;
background-color: #86f00e;
}
.tutimg {
float: none;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
}
</style>
</head>
<body>
<div>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle
oftext.you need to be sure there isn't anything embarrassing hidden in the middle
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.making this the first true generator on the Internet of text.
<img class="tutimg" src="images/tutimg.png" />
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.
</p>
</div>
</body>
</html>CSS Float - Floating To Left or Right
可以在 div 中向左或向右浮动图像，并且在图像上设置填充和边距。
示例如下：
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 20px;
margin: 10px;
background-color: #86f00e;
}
.tutimg1 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
margin: 3px;
}
.tutimg2 {
float: right;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
margin: 3px;
}
</style>
</head>
<body>
<div>
<p> <img class="tutimg1" src="images/tutimg.png" />
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
middle of text. you need to be sure there isn't anything embarrassing hidden in the middle
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first true generator on the Internet of text.making
this the first true generator on the Internet of text.
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first true generator on the Internet of text.<img class="tutimg2" src="images/tutimg.png" />repeat
predefined chunks as necessary, making this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first true generator on the Internet of text.repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first true generator on the Internet of text.repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first true generator on the Internet of text.first true generator on the Internet of text.
</p>
</div>
</body>
</html>CSS Float - Images Overlapping
可以通过调整边距来使浮动图像重叠。要使两个浮动图像重叠，可以将其中一个图像的边距设置为负值。
示例如下：
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 20px;
margin: 15px;
background-color: #86f00e;
}
.tutimg1 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
margin: 5px;
}
.tutimg2 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
margin-left: -5px;
margin-right: 5px;
}
.tutimg3 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
margin: 5px;
}
</style>
</head>
<body>
<div>
<p><img class="tutimg1" src="images/tutimg.png" />There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
middle of text. All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary.<img class="tutimg2" src="images/tutimg.png" />Lorem Ipsum is simply
dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long
established fact that a reader will be distracted by the readable content of a page when looking at its layout.
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to
using 'Content here, content here', making it look like readable English.<img class="tutimg3" src="images/tutimg.png" />
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
middle of text.you need to be sure there isn't anything embarrassing hidden in the middle
All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text. All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary.Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</body>
</html>CSS Float - Images Not Adjacent
第一个图像放置在容器的左边缘，第二个图像放置在第一个图像的右侧，但不与其重叠。
示例如下：
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 20px;
margin: 15px;
width: 600px;
background-color: #86f00e;
}
.tutimg1 {
float: left;
border: 3px solid #f0610e;
width: 320;
height: 150px;
margin-right: 5px;
}
.tutimg2 {
float: right;
border: 3px solid #f0610e;
width: 320px;
height: 150px;
margin-left: 5px;
}
</style>
</head>
<body>
<div>
<p><img class="tutimg1" src="images/tutimg.png" />There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. <img class="tutimg2" src="images/tutimg.png" />Lorem Ipsum is simply
dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long
established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</p>
</div>
</body>
</html>CSS Float - Float Below Their Predecessors
我们可以通过将图像的边距设置为负值来使图像浮动在它的前身下方。
示例如下：
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 10px;
background-color: #86f00e;
}
.tutimg {
float: none;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
}
.tutimg1 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
margin-right: 5px;
}
.tutimg2 {
float: left;
border: 3px solid #f0610e;
width: 200px;
height: 80px;
margin-top: -5px;
margin-right: 5px;
}
.tutimg3 {
float: right;
border: 3px solid #f0610e;
width: 100px;
height: 120px;
margin: 5px;
}
</style>
</head>
<body>
<div>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
middle of text.<img class="tutimg1" src="images/tutimg.png" />you need to be sure there isn't anything embarrassing
hidden in the middle. All the Lorem Ip generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first true generator on the Internet of text.making this the first true generator on the Internet of
text.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book.It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages. <img class="tutimg2" src="images/tutimg.png" /> <img class="tutimg3" src="images/tutimg.png" />
All the Lorem Ipsum 2enerators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
this the first true generator on the Internet of text.All the Lorem Ipsum generators on the Internet tend to
repeat predefined chunks as necessary, making this the first true generator on the Internet of text.Contrary
to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure
Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical
literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de
</p>
</div>
</body>
</html>CSS Float - To a New Line
如果当前行没有足够的空间容纳所有浮动，则剩余的浮动将被推到下一行。
示例如下：
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 10px;
background-color: #86f00e;
width: 40%;
}
.tutimg1 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 80px;
}
.tutimg2 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 100px;
}
.tutimg3 {
float: left;
border: 3px solid #f0610e;
width: 100px;
height: 60px;
}
.tutimg4 {
float: left;
border: 3px solid #f0610e;
width: 150px;
height: 100px;
}
</style>
</head>
<body>
<div>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
some form, by injected humour, or randomised words which don't look even slightly believable. If you are
this the first true genera tor on the Internet of text. making this the first true generator on the Internet of
going to use a passage of Lorem Ipsum.don't look even slightly believable. sure there isn't anything
<img class="tutimg1" src="images/tutimg.png" /> <img class="tutimg1" src="images/tutimg.png" />
<img class="tutimg2" src="images/tutimg.png" /> <img class="tutimg3" src="images/tutimg.png" /><img
class="tutimg1" src="images/tutimg.png" />tor on the Internet of text. making this the first true generator
on the Internet of going to use a passage of Lorem Ipsum.don't look even slightly believable.making this the first true generator
on the Internet of going to use a passage of Lorem Ipsum.don't look even slightly believable.
</p>
</div>
</body>
</html>