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. 超级块，i节点，数据块，目录块，间接块

    一.物理磁盘到文件系统 文件系统用来存储文件内容,文件属性,和目录,这些类型的数据如何存储在磁盘块上的呢?Unix/linux使用了一个简单的方法. 他将磁盘分为3个部分: 超级块,文件系统中第一个块 ...

  2. opencv轮廓外接矩形

    1.寻找轮廓 api void cv::findContours( InputOutputArray image, OutputArrayOfArrays contours, OutputArray ...

  3. CNN-4: GoogLeNet 卷积神经网络模型

    1.GoogLeNet 模型简介 GoogLeNet 是2014年Christian Szegedy提出的一种全新的深度学习结构,该模型获得了ImageNet挑战赛的冠军. 2.GoogLeNet 模 ...

  4. 写一个单独的qt模块 -- ongoing

    彩阳发的链接: https://wiki.qt.io/Creating_a_new_module_or_tool_for_Qt

  5. sqlserver2005版本的mdf文件，还没有log文件，

    https://www.cnblogs.com/wanglg/p/3740129.html  来自此文 仅做备忘  感谢提供信息让我处理好此问题 sqlserver mdf向上兼容附加数据库(无法打开 ...

  6. java源码 -- AbstractSet

    AbstractSet抽象类属于Set集合分支的顶层类,它继承了AbstractCollection,实现了Set接口. public abstract class AbstractSet<E& ...

  7. OOP_面向对象程序设计概述

    李际军老师"面向对象程序设计"课程第一课笔记整理 面向对象程序设计概述 20世纪90年代以来面向对象程序设计(Object Oriented Programming, 简称OOP) ...

  8. diy操作系统 附录：常用命令

    ld -m elf_i386 as --32 gcc -m 16 o

  9. （十一）shiro与ssm整合

    所有代码在:here pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="h ...

  10. QTabWidget标签实现双击关闭（转）

    重载了QTabWidget(由于tabBar()是protected),这样就可以获取到标签了. 1 class Tab : public QTabWidget 2 { 3 Q_OBJECT 4 pu ...