1.实现两个div并排显示

案例：checkbox的标题和内容需要并排显示，checkbox竖向排列

<head>

<style type="text/css">

.curr_box {

    margin-top: 10px;

}

.row1 {

    float: right;

    width: 65%;

    position: relative;

}

label {

    float: left;

    height: 17px;

    width: 25%;

    text-align: center;

    margin-top: 5px;

}

.checkbox-inline1 {

    margin-bottom: 0;

    font-weight: normal;

    vertical-align: middle;

    cursor: pointer;

    width: 78%;

}

</style>

<title>我的第一个 HTML 页面</title>

</head>

<body>

    <div class="curr_box">

        <div>

            <label>有无肇事肇祸行为</label>

        </div>

        <div class="row1">

            <div class="checkbox-inline1">

                <input type="checkbox" name="isPsychoService" value="1"> 有肇事行为

            </div>

            <div class="checkbox-inline1">

                <input type="checkbox" name="isPsychoService" value="2"> 有肇祸行为

            </div>

            <div class="checkbox-inline1">

                <input type="checkbox" name="isPsychoService" value="3"> 轻度滋事

            </div>

        </div>

    </div>

</body>

</html>

这里使用的是float浮动，只要子div的长度小于父div的长度，就可以实现并排效果

还有就是使用position进行绝对定位

<html>

<head>

<style type="text/css">

.curr_box {

    margin-top: 10px;

}

.row1 {

    width: 65%;

    margin-left: 150px;

}

label {

    position: absolute;

    height: 17px;

    width: 25%;

    text-align: center;

    margin-top: 5px;

}

.checkbox-inline1 {

    margin-bottom: 0;

    font-weight: normal;

    vertical-align: middle;

    cursor: pointer;

    width: 78%;

}

</style>

<title>我的第一个 HTML 页面</title>

</head>

<body>

    <div class="curr_box">

        <div>

            <label>有无肇事肇祸行为</label>

        </div>

        <div class="row1">

            <div class="checkbox-inline1">

                <input type="checkbox" name="isPsychoService" value="1"> 有肇事行为

            </div>

            <div class="checkbox-inline1">

                <input type="checkbox" name="isPsychoService" value="2"> 有肇祸行为

            </div>

            <div class="checkbox-inline1">

                <input type="checkbox" name="isPsychoService" value="3"> 轻度滋事

            </div>

        </div>

    </div>

</body>

</html>

在这里提醒一点，如果绝对定位没有设置top,left属性的，该元素就是块级元素，会换行显示，如果加了top等属性，会以父元素最为参考系

Css案例整理的更多相关文章

  1. css hack整理：区别FF，IE8，IE7，IE6，SF，CH浏览器

    css hack整理:区别FF,IE8,IE7,IE6,SF,CH浏览器 2013年03月24日 ⁄ CSS ⁄ 共 716字 ⁄ 暂无评论         前端开发最要命的事就是处理浏览器的兼容性问 ...

  2. CSS精心整理的面试题

    CSS精心整理的面试题 1.设置边框的样式用border-style实现,设置边框的颜色用border-color实现 2.CSS的语法由选择器.属性.值三部分组成 3.设置一个div的最小宽度为50 ...

  3. css案例学习之table tr th td ul li实现日历

    效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...

  4. css命名整理

    .container { width: 720px; background: #fafafa; border: 2px dashed #999; padding: 10px; float: left ...

  5. 前端CSS规范整理_转载、、、

    一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用U ...

  6. css代码整理、收集

    整理了一下之前用到过的css代码,实现一种效果或许有许多种写法,我这里整理了一下我个人认为兼容性比较好,结构比较简洁的代码……如有写得不对的地方敬请前辈们指点赐教一下,小弟不胜感激!此学习笔记是动态的 ...

  7. css案例学习之盒子模型

    定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...

  8. [转]前端CSS规范整理

    一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core  通用 ...

  9. CSS 知识点整理

    本文是我整理的关于CSS的部分基础知识点,适合正在准备前端工作面试的人做简单回顾. 1. 盒子模型 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容. Mar ...

随机推荐

  1. 最新 小红书java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.小红书等10家互联网公司的校招Offer,因为某些自身原因最终选择了小红书.6.7月主要是做系统复习.项目复盘.LeetCo ...

  2. 总结几个最近处理问题中使用http协议的代码

    demo1:几个不同的http请求方式总结: ----------------------------------------------------------------------------- ...

  3. python3 爬虫利用Requests 实现下载进度条

    一.编写代码 from datetime import datetime,date,timedelta from contextlib import closing import urllib,url ...

  4. Jmeter plugins 之 Perfmon Metrics Collector（服务器性能监控）

    客户端(Jmeter端) 1.安装plugins manager,然后安装  2.添加listener-(第1步成功后才可看到此功能)  服务端:(要监控的服务器) 1.下载ServerAgent,并 ...

  5. 13_日期时间、Math、枚举

    日期时间.Math.枚举 日期时间 计算机如何表示时间? GMT时间指格林尼治所在地的标准时间,也称为时间协调时(UTC),其他地区的时间都是相对于GMT时间的偏移.   北京位于东八区 = UTC ...

  6. prometheus+grafana监控nginx

    被监控机器环境搭建&配置 nginx-module-vts下载: https://github.com/vozlt/nginx-module-vts nginx-module-vts安装 un ...

  7. 开发人员需求能kill杀死其它阻塞自己的会话，测试发现需要alter system权限有风险

    模拟开发人员需求,可以杀死其它阻塞自己的会话1.能有查询阻塞会话确认的权限SQL> grant select on v_$session to testa;SQL> grant selec ...

  8. C# XML 序列化帮助类

    /// <summary> /// Xml helper class /// </summary> public static class XmlHelper { #regio ...

  9. express 和 vue-cli 的博客网站

    已经上传到github地址:https://github.com/13476075014/node-vue/tree/master/mynodeproject/15.TimeBlog # 个人博客系统 ...

  10. 解决ios8下coreData没有NSPersistentContainer的问题

    用Xcode8.1默认创建ios app的时候,使用coreData的话,要10.0以上的版本才行.因为NSPersistentContainer只有10.0以上的版本才有,10.0以下的版本是没有的 ...