首页 > 其他分享 >浮动布局

浮动布局

时间:2024-02-23 18:24:28浏览次数:19  
标签:浮动 wrap1 布局 float 300px width background

<template>
    <div>
        <div class="wrap1">
            <div class="left">

            </div>
            <div class="right">

            </div>
            <div class="center">
                浮动布局
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style>
    .wrap1 div{
        min-height: 300px;
    }
    .wrap1 .left{
        float: left;
        width: 300px;
        background: red;
    }
    .wrap1 .right{
        float: right;
        width: 300px;
        background: blue;
    }
    .wrap1 .center{
        background: pink;
    }
</style>
<!-- 页面宽度不够影响布局 -->

标签:浮动,wrap1,布局,float,300px,width,background
From: https://www.cnblogs.com/xzemt/p/18030159

相关文章

  • 表格布局
    <template><div><divclass="wrap4wrap"><divclass="left"></div><divclass="center">表格布局</div><divclass="right"......
  • flex布局
    <template><div><divclass="wrap3wrap"><divclass="left"></div><divclass="center">flex布局</div><divclass="right&quo......
  • 标签,属性与布局元素
    HTML常用元素与元素1.标签元素的功能描述html元素的功能:,双标签内容由用户提供:Helloworld单标签/空元素:没有内容也叫空元素,内容有某个属性指定,:......
  • css 清除浮动的方法
    好的,我会增加一些更详细的说明。在web开发的过程中,"浮动"是CSS中可以使元素向左或向右移动,直到他们碰到其父元素边缘或者另一个浮动元素的属性。虽然它很有用,但是如果不正确地处理,它可能会导致一些意想不到的页面布局问题。**清除浮动的方法**:1.**使用clear属性**:HTML......
  • css浮动(float)详解
    https://blog.csdn.net/weixin_45123004/article/details/104463619浮动详解一、什么是浮动?浮动,顾名思义,就是漂浮的意思。指的是一个元素脱离文档流,悬浮在父元素之上的现象。二、如何产生浮动?给元素本身添加float属性float: 三、浮动有什么作用?作用:在html文档流中,分为行元......
  • 深度解析:iOS开发中Masonry第三方库可能出现的布局崩溃问题及解决方案
    在iOS应用开发过程中,自动布局是一个至关重要的环节。作为广受欢迎的第三方布局框架,Masonry以其简洁的链式语法和强大的功能为开发者提供了便利。然而,在实际使用过程中,如果不正确地配置约束,可能会导致界面布局崩溃的问题。本文将通过具体代码示例探讨几种常见的Masonry布局崩溃原因......
  • 承前启后,Java对象内存布局和对象头
    承前启后,Java对象内存布局和对象头大家好,我是小高先生。在我之前的一篇文章《并发编程防御装-锁(基础版)》中,我简要介绍了锁的基础知识,并解释了为什么Java中的任何对象都可以作为锁。在那里,我提到了对象头中有一个指向ObjectMonitor的指针,但没有深入探讨Java对象的内存结构。本文将......
  • 前端知识汇总2(css,css2, 页面布局,移动端适配)
    固定定位(fixed)固定定位是绝对定位的一种特殊形式。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时,即可将元素的定位模式设置为固定定位。当对无素设置固定定位后,它将脱离标准文档流的控制,始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条......
  • c# WPF 布局控件
    c#WPF布局控件风雨飘潇有鼻子有眼,普通路人一个 3人赞同了该文章一、概论WPF是继MFC和Winform后,下一代Windows桌面应用程序的技术。其核心是一个与分辨率无关并且基于向量的程序引擎,以在现代图形硬件的优势下,实现更优质的用户客户端软......
  • Android家庭记账本开发第二天:activity_main布局文件
    本次开发记录是在开发完成之后记录的,所以能写几篇我也不知道,可能没有十篇,将这次的开发记录作为一次知识点复习的机会。开发完成之后的目录如下安卓开发相较于之前进行的Javaweb开发难度要高上不少,因为之前的都是通过tomcat服务器去运行,我们只需要将对应的页面完善好就行,但是安......