CSS 布局

您所在的位置:网站首页 web向右浮动 CSS 布局

CSS 布局

2024-04-18 16:45| 来源: 网络整理| 查看: 265

❮ 上一节 下一节 ❯ CSS 布局 - 浮动和清除

CSS float 属性规定元素如何浮动。

CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

float 属性

float 属性用于定位和格式化内容,例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一:

left - 元素浮动到其容器的左侧 right - 元素浮动在其容器的右侧 none - 元素不会浮动(将显示在文本中刚出现的位置)。默认值。 inherit - 元素继承其父级的 float 值

最简单的用法是, float 属性可实现(报纸上)文字包围图片的效果。

实例 - float: right;

下例指定图像应在文本中向右浮动:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

实例 img {  float: right;} 亲自试一试 » 实例 - float: left;

下例指定图像应在文本中向左浮动:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

实例 img {  float: left;} 亲自试一试 » 实例 - No float

在下例中,图像将显示在文本中刚出现的位置(float: none;):

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

实例 img {  float: none;} 亲自试一试 » ❮ 上一节 下一节 ❯


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3