<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>常见元素布局</title>

        <style type="text/css">

            /* 一、水平居中布局 */

            /* 1.单个元素水平居中 宽度不固定 缺点：需要涉及到父类的样式*/

            .content {

                text-align: center;

            }

            .box {

                display: inline-block;

                color: #fff;

                background: #0000FF;

            }

        </style>

    </head>

    <body>

        <div class="content">

            <div class="box">

            宽度不固定

            </div>

        </div>

    </body>

</html>
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>常见元素布局</title>

        <style type="text/css">

            /* 一、水平居中布局 */

            /* 2.单个元素水平居中 宽度不固定 缺点：设置为表格元素，内部元素的布局有可能受到影响*/

            .box {

                display: table;

                margin: 0 auto;

                background: #ff9933;

                color: #fff; /* background和color测试更好的观看效果 */

            }

        </style>

    </head>

    <body>

        <div class="content">

            <div class="box">

                宽度不固定

            </div>

        </div>

    </body>

</html>
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>常见元素布局</title>

        <style type="text/css">

            /* 一、水平居中布局 */

            /* 3.单个元素水平居中 宽度不固定 缺点:transform,兼容性较差*/

            .content {

                position: relative;

            }

            .box {

                position: absolute;

                left: 50%;

                transform: translateX(-50%);

                background: #ff9933;

                color: #fff; /* background和color测试更好的观看效果 */

            }

        </style>

    </head>

    <body>

        <div class="content">

            <div class="box">

                宽度不固定

            </div>

        </div>

    </body>

</html>

效果：

pc端常见布局---水平居中布局 单元素不定宽度的更多相关文章

  1. pc端常见布局---水平居中布局 单元素定宽

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. pc端常见布局样式总结（针对常见的）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. pc端常见布局---垂直居中布局 单元素不定高

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. pc端常见布局---垂直居中布局 单元素定高

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. pc端布局的一点思考

    编写pc端页面需要注意些什么? 1.自适应最小屏幕,在小屏幕上样式不能错乱. 在桌面屏幕各分辨率使用比例中可以看到各桌面分辨率的使用比例,日常pc端开发我们会考虑到适配1024宽度大小的屏幕. 对于管 ...

  6. 主流 CSS 布局(水平居中、垂直居中、居中 )

    什么是布局 html 页面的整体结构或骨架 布局不是某个技术内容 而是一种设计思想 [ 布局方式 ] 水平居中布局 垂直居中布局 居中布局( 水平 + 垂直 ) 什么是水平居中布局 水平居中布局 元素 ...

  7. 淘宝购物车页面 PC端和移动端实战

    最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...

  8. 在前端眼中pc端和移动的开发区别

    按照昨天所说,本包子今天将总结在前端开发中,pc端和移动端的区别,整理完这些区别,本包子将开始整理pc端的布局,会写实际的代码了,还是那句话,希望文章中有什么不足的地方,大家能多多指正,大家一起进步, ...

  9. PC端自适应布局

    截止目前,国内绝大多数内容为主的网站(知乎,果壳,V2EX,网易新闻等)均使用内容区定宽布局,大多数电商网站(网易考拉,京东,聚美优品)也使用了内容区定宽的布局,也有些网站使用了自适应布局: 天猫 内 ...

随机推荐

  1. POI 中的CellType类型以及值的对应关系

    操作使用POI接口,了解CellType的类型和值的对应关系. CellType 类型 值 CELL_TYPE_NUMERIC 数值型 0 CELL_TYPE_STRING 字符串型 1 CELL_T ...

  2. xgene：肿瘤相关基因 EGFR，，Her2，，TP53，，ALK

    EGFR: “Epidermal growth factor receptor”,表皮生长因子受体.别名:ErbB1,或 HER1 EGFR是ErbB基因家族的成员之一.ErbB基因家族包括了:EGF ...

  3. Matcher的replaceAll ()/appendReplacement()/appendTail()详细举例

    直接上例子: package com.dajiangtai.djt_spider.util; import java.util.regex.Matcher;import java.util.regex ...

  4. Ext.net Calendar 控件在有模板页的时候，模板页定义了TD的样式造成日历控件的样式丢掉

    Ext.net Calendar 控件在有模板页的时候,模板页定义了TD的样式造成日历控件的样式丢掉 解决方案 在本页面添加下面的样式 <style type="text/css&qu ...

  5. 2018上海大都会 J-Beautiful Numbers（数位dp-模未知）

    J-Beautiful Numbers 链接:https://www.nowcoder.com/acm/contest/163/J 来源:牛客网 时间限制:C/C++ 8秒,其他语言16秒 空间限制: ...

  6. 原生js实现一个侧滑删除取消组件（item slide）

    组件,本质上是解决某个问题封装的类,在此记录原生js实现侧滑删除 先上效果图 实现思路 1. 确定渲染的数据结构 2. 思考划分布局,总的有两个主要的模块:内容区域和按钮区域 2.1 内容区域保持宽度 ...

  7. 根据rowid删除最新数据(rowid最大为最新数据)(转)

    https://blog.csdn.net/liuyuehui110/article/details/43524379

  8. ue4 模拟tween

    timeline的设置,注意timeLine可以使用外部的曲线,这个比较方便做各种曲线,timeline内部只适合打单个点

  9. 使用ffmpeg编码时，如何设置恒定码率，并控制好关键帧I帧间隔

    1. 大家在使用ffmpeg进行视频编码时,使用-b命令,想控制比特率,却发现结果并没有如我们设置所愿,通过码流分析器观察视频码流,码率的波动还是很大的,ffmpeg控制的并不好,这时候,我们可以通过 ...

  10. 截取HTML中的JSON数据并利用GSON进行解析(Android)

    截取HTML中的JSON数据并利用GSON进行解析(Android) 前言 最近在做的一个Android项目,需要自行搭建服务器,队友选择买了阿里云的服务器ESC产品,在数据获取上,我们采用了Andr ...