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. Redis 数据类型String 使用

    字符串是Redis中最基本的数据类型,它能够存储任何类型的字符串,包含二进制数据.可以用于存储邮箱,JSON化的对象,甚至是一张图片,一个字符串允许存储的最大容量为512MB.字符串是其他四种类型的基 ...

  2. PyCharm Community Edition编辑Python查看数据库

    描述:利用PyCharm Community Edition社区版本的时候无法查看数据库 解决方法如下: 点击File之后选择setting 点击setting之后出现的画面上面选择Plugins,之 ...

  3. 事务的ACID

    事务提供一种机制将一个活动涉及的所有操作纳入到一个不可分割的执行单元,组成事务的所有操作只有在所有操作均能正常执行的情况下方能提交,只要其中任一操作执行失败,都将导致整个事务的回滚. 简单地说,事务提 ...

  4. javascript当中火狐的firebug如何单步调试程序？

    [学习笔记] 2)火狐的firebug如何单步调试程序 马克-to-win:火狐中:工具/web 开发者/调试器,开始时没有文件,在浏览器当中点刷新按钮,文件就加载进来了. 文章转载自原文:https ...

  5. 【牛客网】Idol Master

    [牛客网]Idol Master 也是一道网络流解线性规划 不过需要从小于号的那边解 限制是\(a \leq \sum_{i = 1}^{k} x_{i}\leq b\) 其中\(0 \leq x_{ ...

  6. 剑指offer30：连续子数组的最大和

    1 题目描述 HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好解决.但是,如果 ...

  7. 1,electron搭建

    electron可以用js来创建丰富的桌面应用 一个electron应用的目录结构 your-app/ ├── package.json ├── main.js └── index.html 1,安装 ...

  8. 【数据结构】P1165 日志分析

    题目描述 MM 海运公司最近要对旗下仓库的货物进出情况进行统计.目前他们所拥有的唯一记录就是一个记录集装箱进出情况的日志.该日志记录了两类操作:第一类操作为集装箱入库操作,以及该次入库的集装箱重量:第 ...

  9. s5p6818 Overview

    S5P6818: 64bit Octa-Core, High Performance, Advanced 3D Graphics, Full-HD Multimedia Video, A53 Core ...

  10. 基于搜索的贝叶斯网络结构学习算法-K2

    基于搜索的贝叶斯网络结构学习算法-K2 2018-04-05 19:34:18 ItsBlue 阅读数 3172更多 分类专栏: 贝叶斯网络 网络结构学习   版权声明:本文为博主原创文章,遵循CC ...