前两天曲面了一下腾讯，被鄙视了。。。

自己太水了，且面试官对我可能也有点不爽，说什么还没叫我我就去了，可是尼玛写的面试时间是3点40，我特码进去的时候都3点50了，我还以为晚了呢，他妈的。

实现几个div的并排显示居中。

其实，实现的原理很简单就是在几个div的外面再加上一个div，然后设置外面的div 的text-align属性就可以了。

<!DOCTYPE html>

<html>

 <head>

         <meta charset="utf-8">

     <title>div自适应</title>

     <style type="text/css">

        .div_allinline

{

text-align:center;

  margin:0 auto;

   padding:0;

   clear:both;

 }  

.subdiv_allinline

{

    margin:0;

    border:2px solid #33F;

    width:200px;

    height:200px;

   padding:0;

   display:inline-block;

    _display:inline;

   *display:inline;

    zoom:1;

}  

     </style>

 </head>

 <body>

    <div class="div_allinline">

   <div class="subdiv_allinline">

     你好，这是div1的第一行。

         <br>你好，这是div1的第二行

       </div>

    <div class="subdiv_allinline">

    你好，这是div2的第一行。

     <br>你好，这是div2的第二行

      </div>

      <div class="subdiv_allinline">

    你好，这是div3的第一行。

        <br>你好，这是div3的第二行

      </div>

      <div class="subdiv_allinline">

    你好，这是div4的第一行。

        <br>你好，这是div4的第二行

      </div>

</div>  

 </body>

 </html>

运行效果：

如果我们把内部div的个数改为3个呢？

一样可以实现自动居中

多个div并排显示的居中问题——来自腾讯的一道面试题的更多相关文章

  1. （转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）

    一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...

  2. 让两个Div并排显示

    一.使用display的inline属性 <div style="width:300px; height:auto; float:left; display:inline"& ...

  3. 两个DIV并排显示

    今天做的一个项目,需要做3个div,一个是总框(Div1),另外两个是子框,按比例填满div1,我设置好两个div的width和height,发现效果是两个子div上下显示,如图所示: 要想将两个DI ...

  4. html中怎么样让div并排显示

    html中的div默认是流式显示,每个div会占用一整行 <html> <head> <meta http-equiv="Content-Type" ...

  5. 在HTML中实现两个div并排显示

    在HTML中让两个div并排显示,通常情况下有三种实现方式,包括: (1)设置为行内样式,display:inline-block (2)设置float浮动 (3)设置position定位属性为abs ...

  6. 如何让两个div并排显示

    正常情况下两个div都是上下排版的,那么怎么让它们并排显示呢? 方法一:都左浮动float:left; 方法二:一个左浮动,一个右浮动 方法三:给两个div都设置display:inline属性,但两 ...

  7. html中DIv并排显示问题

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  8. 两个div并排显示，当浏览器界面缩小时会出现换行

    解决:规定两个子div的父div的宽 <div id="showDataDiv" style="width: 1000px"> <div st ...

  9. html设置多个div并排显示

    我这里以4个div为例,html代码如下: <body> <div id="column1" style="background-color: blue ...

随机推荐

  1. 【思考】由安装zabbix至排障php一系列引发的思考

    [思考]由安装zabbix至排障php一系列引发的思考 linux的知识点林立众多,很有可能你在排查一个故障的时候就得用到另一门技术的知识: 由于linux本身的应用依赖的库和其它环境环环相扣,但又没 ...

  2. C语言---注释

    1.单行注释 //注释内容 2.多行注释 /*注释内容*/ 3.#if 0 注释内容 #endif 说明: 1.单行注释//不通用,有些编译器不支持 2.多行注释不能嵌套 3.#if 0 #endif ...

  3. kali Linux 文本图形界面切换遇到的怪问题

    前段装了在Virtual Box上装一个Kali Linux玩,然后设为了开机进入文本界面,后来遇到无法上网的问题,网上找到解决方法,说是NAT地址转换和host-only双网卡顺序问题,按照网上的说 ...

  4. try{return} finally

    今天去逛论坛 时发现了一个很有趣的问题: 谁能给我我解释一下这段程序的结果为什么是:2.而不是:3? 代码如下: class Test { public int aaa() { int x = 1; ...

  5. 在.bashrc中，使用python获取本机IP地址(现在只支持wlan)

    其实最好的办法是写个单独的脚本去查找IP,但是如果实在不愿意单写一个脚本文件,也可以直接将代码嵌入.bashrc中 在~/.bashrc下加入下面这行代码即可使用python获取本机的wlan的IP地 ...

  6. Delphi - 在ListView中添加一个进度条

    // 相关定义 Type TListData = Record FileName: String; Percent: Integer; End; PListData = ^TListData; // ...

  7. [ADO.NET]写入数据

    关键字:.NET,SQL SERVER,SQLBULKCOPY 插入一条数据的操作(SqlCmd). public void InsertOneIntoSourceDB() { if (DBConne ...

  8. 初学C++，开博第一篇

    几个维度相同的数组转置算法,这两种完全相同://注意:如果维度不同,转置会出错误,因为下标会越界...解决办法是把数组的维度调齐,或者是写到另一新数组中. for(int i=0;i<row;i ...

  9. mybatis学习（一）一个在idea下的实例

    今天总结的是mybatis,首先说mybatis是什么? MyBatis 是一个简化和实现了 Java 数据持久化层(persistence layer)的开源框架,它抽象了大量的 JDBC 冗余代 ...

  10. java三线程循环有序打印ABC

    迅雷笔试题: 编写一个程序,开启3个线程,这3个线程的ID分别为A.B.C,每个线程将自己的ID在屏幕上打印10遍,要求输出结果必须按ABC的顺序显示:如:ABCABC….依次递推. 解决思路:每个线 ...