网站制作教程:CSS 浮点型

你的网络首码项目网 网站建设来源:你的网络首码项目网评论152字数 1057阅读模式

您可以将元素“浮动”到右侧或左侧,以便其他内容在其周围流动。

CSS浮点型属性使您能够确定相对于页面上其他元素的元素的位置。使用float属性时,其他元素将简单地环绕您应用float的元素。文章源自你的网络首码项目网-https://www.youranweb.com/271.html

向左浮动示例

在此示例中,我们将<div>元素设置为,这将导致其余内容环绕它。float:left文章源自你的网络首码项目网-https://www.youranweb.com/271.html

请注意,我在框的右侧和底部应用了边距,以便其余内容不会直接与框相对。文章源自你的网络首码项目网-https://www.youranweb.com/271.html

<!DOCTYPE html>
<title>Example</title>
<style>
  .float-left {
    float: left;
    padding: 20px;
    margin: 0 10px 10px 0;
    background: gold;
  }
</style>

<div class="float-left">
  向左浮动
</div>
<p>
此文本重新排列自身以围绕向左浮动的元素流动。 </p>
<p>我在浮动框的右侧和底部添加了一个边距,以便此文本不会直接与之相对。使用属性值以查看它如何更改布局。</p>

浮动右示例

在此示例中,我们将<div>元素设置为,这将导致其余内容环绕它。float:right文章源自你的网络首码项目网-https://www.youranweb.com/271.html

在这种情况下,我保留下边距,但将右边距移到框的左侧。文章源自你的网络首码项目网-https://www.youranweb.com/271.html

<!DOCTYPE html>
<title>Example</title>
<style>
  .float-right {
    float: right;
    padding: 20px;
    margin: 0 0 10px 10px;
    background: gold;
  }
</style>

<div class="float-right">
  向右浮动
</div>
<p>此文本重新排列自身以围绕向右浮动的元素流动。 </p>
<p>我在浮动框的左侧和底部添加了一个边距,以便此文本不会直接与之相对。使用属性值以查看它如何更改布局。</p>

并排对齐框

在这里,我们使用<div>元素并排对齐。通常,这些元素会堆叠在一起,但是通过使用,我们可以使它们彼此相邻显示。float:leftfloat:left文章源自你的网络首码项目网-https://www.youranweb.com/271.html

<!DOCTYPE html>
<title>Example</title>
<style>
  div {
    float: left;
    padding: 20px; 
  }
  .gold {
    background: gold;
  }
  .limegreen {
    background: limegreen;
  }
  .orange {
    background: orange;
  }
</style>

<div class="gold">
金
</div>
<div class="limegreen">
石灰绿
</div>
<div class="orange">
橙
</div>
文章源自你的网络首码项目网-https://www.youranweb.com/271.html文章源自你的网络首码项目网-https://www.youranweb.com/271.html
相关文章
weinxin
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台,所有文章均来自网络和网友投稿,不代表本站任何立场,请勿盲目下载注册参与,以免为您带来不必要的损失。
你的网络首码项目网

发表评论