<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*

{

    margin:0px;

    padding:0px;}

.a

{

    width:150px;

    height:300px;

    border:1px solid #F00;}

</style>

</head>

<body>

<!--float 只需要确定左右，他就会靠左右边出现，同时建立多个，默认占满第一行后自动换行-->

<div class="a" style="float:left">A</div>

<div class="a" style="float:right">B</div>

<div class="a" style="float:left">C</div>

<div class="a" style="float:right">D</div>

<div class="a" style="float:left">E</div>

<div class="a" style="float:right">F</div>

</body>

</html>

格式与布局 float 左右悬浮边框的更多相关文章

  1. 一起学HTML基础-格式与布局fixed/absolute/relative/z-index/float

    很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...

  2. css样式，边界和边框，格式和布局

    1.大小:width:宽:heigh:高 2.背景:1)background-color:背景颜色 2)background-image:背景图片url路径 3)background-repeat:图 ...

  3. css样式表----------样式属性（背景与前景、边界和边框、列表与方块、格式与布局）

    一.背景与前景 (1).背景 line-height: 1.5 !important;">90; /*背景色(以样式表为主,样式表优先.)*/ background-image:url ...

  4. 9月11日上午HTML有序列表、无序列表、网页的格式和布局

    样式表 六.列表方块 1.有序列表变无序列表 <ol> <li>张店</li> <li>桓台</li> <li>淄川</l ...

  5. css样式表：样式分类，选择器。样式属性，格式与布局

    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...

  6. css样式表 格式与布局

    1 样式表  内联样式表  内嵌样式表  外部样式表 2 选择器 标签选择器 <style type="text\css" class 选择器  以.开头 ID选择器 以#开 ...

  7. 关于CSS格式与布局中的基础知识的简单操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 网页布局——float浮动布局

    我的主要参考资料是[Object object]的文章 float 布局应该是目前各大网站用的最多的一种布局方式了,但是也特别复杂,这里详细讲一下 首先,什么是浮动? 浮动元素是脱离文档流的,但不脱离 ...

  9. HTML静态网页的格式与布局（position：（fixed、absolute、relative）、分层、float（left、right））

    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute 1.外层没有position:absolute(或r ...

随机推荐

  1. js往div里添加table

    $("#div").append("<table><tr align='center'>" +"<td >&quo ...

  2. java工具类-FreeMarker

    package com.huawei.it.citools.utils; import java.io.File;import java.io.IOException;import java.io.S ...

  3. 胡乱摸的NOIP2017游记和总结

    来自YZK的总结 本篇总结主要分成两部分:NOI Professional游记和平日的刷题训练. 今年的NOI Professional TG的难度在洛谷上标记为:二黄一绿三紫.恭喜NOIP今年全面脱 ...

  4. springMVC集成CXF后调用已知的wsdl接口

    本文转载自:https://www.cnblogs.com/xiaochangwei/p/5400303.html 本篇文章将讲解SpringMVC+CXF环境下,怎么调用其他系统通过webServi ...

  5. shell 6基本运算符

    shell支持多种运算符: * 算数运算符 * 关系运算符 * 布尔运算符 * 字符串运算符 * 文件测试运算符 算数运算符 + 加 `expr $a + $b` 结果为 30 - 减 `expr $ ...

  6. Flex 学习

    Flex案例一: <html> <head> <meta http-equiv="Content-Type" content="text/h ...

  7. [UE4]动画序列面板

  8. [UE4]通过代码改变材质

    OrangeMaterial = ConstructorStatics.OrangeMaterial.Get(); , OrangeMaterial); 使用到的结构体如下: struct FCons ...

  9. TSubobjectPtr和C++传统指针的区别

    转自:http://aigo.iteye.com/blog/2282142 主要有以下区别(1和2的前提条件要满足:指针所在的class必须是UObjcct的子类): 1,TSubobjectPtr指 ...

  10. Vuex 状态管理模式

    Vuex 是一个专为 Vue.js 设计的状态管理模式 vuex解决了组件之间同一状态的共享问题.当我们的应用遇到多个组件共享状态时,会需要: 多个组件依赖于同一状态.传参的方法对于多层嵌套的组件将会 ...