<!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. 《Java多线程编程核心技术》读后感（四）

    将任意对象作为对象监视器 synchronized同步代码块还支持任意对象,使用格式为synchronized(非this对象) package Second; public class Servic ...

  2. java读取txt

    java读取txt文件内容.可以作如下理解: 首先获得一个文件句柄.File file = new File(); file即为文件句柄.两人之间连通电话网络了.接下来可以开始打电话了. 通过这条线路 ...

  3. skb_store_bits() 和 skb_copy_bits()

    int skb_copy_bits(const struct sk_buff *skb, int offset, void *to, int len);    int skb_store_bits(c ...

  4. 天梯赛L3-001. 凑零钱（01背包记录物品）

    L3-001. 凑零钱 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 韩梅梅喜欢满宇宙到处逛街.现在她逛到了一家火星店里,发现 ...

  5. logging 模块使用

    1. logging 1.1 什么是 logging logging 模块是 Python 内置的日志管理模块,不需要额外安装. 使用: import logging logging.critical ...

  6. MVC动态生成的表单：表单元素比较多 你就这样写

    MVC动态生成的表单:表单元素比较多 你就这样写: public ActionResult ShoudaanActionResult(FormCollection from,T_UserM user) ...

  7. vjudge个人赛 复习1

    A - 大鱼吃小鱼(栈) 有N条鱼每条鱼的位置及大小均不同,他们沿着X轴游动,有的向左,有的向右.游动的速度是一样的,两条鱼相遇大鱼会吃掉小鱼.从左到右给出每条鱼的大小和游动的方向(0表示向左,1表示 ...

  8. django导入导出excel实践

    一.xlrd和xlwt模块介绍 xlrd模块提供在任何平台上从excel电子表格(.xls和.xlsx)中提取数据的功能,xlwt模块提供生成与Microsoft Excel 95 到2003版本兼容 ...

  9. jQuery EasyUI/TopJUI上传多个附件并可以进行删除操作

    jQuery EasyUI/TopJUI上传多个附件并可以进行删除操作 html <table data-toggle="topjui-datagrid" data-opti ...

  10. shell编程 Shell script 的默认变量($0, $1...)

    Shell script 的默认变量($0, $1...) 我们知道指令可以带有选项与参数,例如 ls -la 可以察看包含隐藏文件的所有属性与权限.那么 shell script 能不能在脚本文件名 ...