首页 > 其他分享 >利用自身的浮动布局

利用自身的浮动布局

时间:2023-03-24 19:31:39浏览次数:42  
标签:浮动 right 利用自身 color 布局 300px height width background

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .container{
            width: 100%;
            background-color: green;
            min-height: 500px;
        }
        .left{
            width: 200px;
            height: 300px;
            background-color: pink;
            float: left;
        }
        .right{
            width: 150px;
            height: 300px;
            background-color: purple;
            float: right;
        }
        .center{
            height: 300px;
            margin-left: 200px;
            margin-right: 150px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
        5236
    </div>
</div>
</body>
</html>

这个方法容易理解,但是记住不要给center设置宽度

 

长风破浪会有时,直挂云帆济沧海



标签:浮动,right,利用自身,color,布局,300px,height,width,background
From: https://blog.51cto.com/u_15961676/6147993

相关文章

  • CSS12.浮动
    浮动1.浮动(float)1.1CSS布局的三种机制网页布局的核心——就是用CSS来摆放盒子CSS提供了3种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位,其中:普通流(......
  • Android开发-Android常用布局
    3.1 线性布局-LinearLayoutLinearLayout是一个视图容器,用于使所有子视图在单个方向(垂直或水平)保持对齐。您可使用android:orientation属性指定布局方向。 andr......
  • Element UI布局容器中<el-container>的一个问题
    <el-container>:外层容器。当子元素中包含 <el-header> 或 <el- footer> 时,全部子元素会垂直上下排列,否则会水平左右排列。所以需要一个<el-header>或<el-footer>......
  • css基础 CSS 布局 – Overflow、Float 浮动、CSS 布局 – 水平 垂直居中对齐
    阅读目录CSS布局–Overflowoverflow:visibleoverflow:hiddenoverflow:scrolloverflow:autoverflow-x和overflow-y所有CSSOverflow属性CSSFloat浮动float属性......
  • 浮动
    浮动浮动的定义float属性定义元素在哪个方向浮动,任何元素都可以浮动.值描述left元素向左浮动right元素向右浮动浮动的原理浮动以后使元素脱离了......
  • 盒子文字的阴影 和 浮动
    知识点一:盒子模型的阴影是四个数值,box-shadow:10px   10px 10px  -4px   rgba(0,0,0,0.3);文字阴影:text-shadow:5px 6px  5px  rgba(0,0,0,0.3);知识点......
  • Android开发-Android UI与布局详解
    1.UIUI - UserInterface - 用户界面 - 系统与用户信息交换的媒介软件设计=编码设计+UI设计AndroidUI=布局+控件2.布局layoutView:微件。用户......
  • flex布局 align-items和align-content
    1.align-items 对齐项目项目只有单行的时候,对齐项目与容器设置高度或者未设置高度 无关可以使用align-self重新定义某一个项目的值align-items:center  项......
  • CAD 2023 设置布局原点
    "布局"对应命令中的"Paper"("P")(而非"Layout"),在其他界面处或称为"图纸"。布局中的元素:虚线框为'可打印区域'可调整,可与图纸页面重合(默认情况下)橘色框为'可打印区域'左......
  • uni-app/微信小程序:scroll-view纵向滚动高度自适应flex布局填充剩余高度
    (目录)文档uni-app文档:https://uniapp.dcloud.net.cn/component/scroll-view.html使用竖向滚动时,需要给<scroll-view>一个固定高度,通过css设置height微信文档......