<!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. MFC编辑框数据实时更新问题

    在VC里,很多情况下需要更新控件,也就是调用UpdateData(FALSE);但是如果是在循环中调用该函数,会导致没有时间来刷新界面,消息得不到相应,从外部看来,似乎整个循环只执行了一次Update ...

  2. POJ-3262

    Protecting the Flowers Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 7923   Accepted: ...

  3. ObservableCollection排序

    ObservableCollection没有自带的sort排序功能,那么可以写一个扩展方法: public static void Sort<T>(this ObservableColle ...

  4. 《Java多线程编程核心技术》读后感（三）

    synchronized同步语句块 用synchronized声明方法在某些情况下是有弊端的,比如A线程调用同步方法执行以一个长时间的任务,那么B线程则必须等待比较较长的时间.在这样的情况下可以使用s ...

  5. 2014 SCAU_ACM 暑期集训

    暑期集训,希望能在这段时间获得对得起自己的提升吧 时间:7.11~8.30 集训各专题内容: 1.贪心,递推,基础DP(背包,区间DP,状态压缩DP(去年出了不少于2道铜牌题,看着办)) 2.搜索(B ...

  6. Linux C/C++时间字符串与time_t之间的转换方法(转)

    1.指定time_t类型的时间,格式化为YYYYMMDDHH24MISS型的字符串 void FormatTime(time_t time1, char *szTime) {        struc ...

  7. 安装Matlab出现Error 1935错误解决方法

    1.开始 - 运行(输入regedit.exe)- 确定或者回车,打开注册表编辑器: 2.在打开的注册表编辑器中找到:HKEY_LOCAL_MACHINE ,并展开:HKEY_LOCAL_MACHIN ...

  8. ZOJ 1586 QS Network Kruskal求最小生成树

    QS Network Sunny Cup 2003 - Preliminary Round April 20th, 12:00 - 17:00 Problem E: QS Network In the ...

  9. C#Timer停不住

    System.Timers.Timer timer1 = new System.Timers.Timer(); timer1.Interval = ; //1天循环一次 timer1.Elapsed ...

  10. 实现prim算法

    如下找出该图的最小生成树 prim算法是求解该类问题的一种经典算法 Prim算法的基本思路:将图中的所有的顶点分为两类:树顶点(已经被选入生成树的顶点)和非树顶点(还未被选入生成树的顶点).首先选择任 ...