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. vue告警信息：{ parser: "babylon" } is deprecated.

    告警信息: 13% building modules 28/40 modules 12 active ...dex=0!\src\App.vue{ parser: "babylon" ...

  2. 51.Qt-使用ajax获取ashx接口的post数据

    由于当前C++项目需要使用ajax库去post调用ashx接口,接口地址如下所示: 需要传递的参数如下: 然后发现qml比较好调用ajax.js库,所以本章通过C++界面去获取qml方法来实现调用as ...

  3. webstorm 2019.1.3 破解

    2019.11.28日,已过期,出门右转 https://blog.csdn.net/ft_sunshine/article/details/92065158 1.修改host文件,末尾添加 0.0. ...

  4. ElasticSearch入门-基本概念介绍以及安装

    Elasticsearch基本概念 Elasticsearch是基于Lucene的全文检索库,本质也是存储数据,很多概念与传统关系型数据库类似. 传统关系型数据库与Elasticsearch进行概念对 ...

  5. Win10 彻底关闭 Windows Defender

    1.使用快捷键 WIN+R 调出运行工具,然后再输入组策略命令 gpedit.msc 再点击确定. 2.进入组策略在计算机配置下面的管理模板,Windows 组件就可以看到 Windows Defen ...

  6. C++:标准模板库map

    一:介绍 map是STL的关联式容器,以key-value的形式存储,以红黑树(平衡二叉查找树)作为底层数据结构,对数据有自动排序的功能. 命名空间为std,所属头文件<map> 注意:不 ...

  7. SDOI2010_大陆争霸（邻接表存图）

    题目描述 在一个遥远的世界里有两个国家:位于大陆西端的杰森国和位于大陆东端的 克里斯国.两个国家的人民分别信仰两个对立的神:杰森国信仰象征黑暗和毁灭 的神曾·布拉泽,而克里斯国信仰象征光明和永恒的神斯 ...

  8. go 常量2

    数值常量 数值常量是高精度的 _值_. 一个未指定类型的常量由上下文来决定其类型. 也尝试一下输出 needInt(Big) 吧. package main import "fmt" ...

  9. Eureka 注册中心一直报Connect to localhost:8761 time out 的问题

    忽略了配置eureka.client.service-url.defaultZone而导致的异常,重新覆盖配置就好 client: fetch-registry: false register-wit ...

  10. asp.net core-10.Http请求的处理过程

    左边是一个普通的网页请求过程,右边是.net core请求过程 这是大致请求流程图: