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

自己太水了，且面试官对我可能也有点不爽，说什么还没叫我我就去了，可是尼玛写的面试时间是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. [置顶] 运算符重载,浅拷贝(logical copy) ,vs, 深拷贝(physical copy)，三大件（bigthree problem）

    一般的我们喜欢这样对对象赋值: Person p1;Person p2=p1; classT object(another_object), or    A a(b); classT object = ...

  2. 自定义异常以及runtime类

    一.自定义异常: 1.自定义异常的概念:在java编程中,我们会遇到很多问题,但是这些问题异常,java并没有给我们定义好,那么我们就要自己定义这些异常,这就是自定义异常: 2.throws 是声明异 ...

  3. Failed to create java virtue machine（不能创建java虚拟机）

    今天开发模块时,遇到这个问题,本来是版本的问题,jdk1.6的版本有点低,与cxf框架不兼容,需要用到jdk1.7,结果安装了jdk1.7之后,客户方要求必须用jdk1.6,要统一,所以卸载jdk1. ...

  4. nginx笔记---http配置

    1.三个逻辑区段 http:该区段嵌入配置文件的根部,在这个区段中允许定义指令和嵌入http相关模块.他包含了一个或多个server区段,他也能够使全局配置生效. server:这个区段建立了一个站点 ...

  5. 【转】物业管理与移动互联网科技|微信公众平台,物业app,物业O2O

    [导语]当下,物业管理行业正在接受新科技浪潮的冲击和洗礼,业界企业纷纷探索物业服务的新发展模式.云服务.微社区.微信公众平台.app等,这些本来陌生的词汇在物业管理行业变得耳熟能详.在借助科技手段拓展 ...

  6. dede版权信息修改

    login:dede-templets-login.htm 系统主页:dede-templets-index2.htm 主体内容在index_body.htm文件   干掉: $(function() ...

  7. MySQL flush privileges 명령어

    INSERT나 UPDATE, DELETE문을 이용해서 MySQL의 사용자를 추가,삭제하거나, 사용자 권한 등을 변경하였을 때, MySQL에 변경사항을 적용하기 위해서 사용하는 명령 ...

  8. JAXB - Validate Document before It is Unmarshalled

    Validation A considerable part of the XML Schema language deals with facets, enabling the programmer ...

  9. HTTP和HTTPS详解

    http://blog.csdn.net/mingli198611/article/details/8055261/ 转自:http://www.cnblogs.com/ok-lanyan/archi ...

  10. WCF编程系列(四)配置文件

    WCF编程系列(四)配置文件   .NET应用程序的配置文件 前述示例中Host项目中的App.config以及Client项目中的App.config称为应用程序配置文件,通过该文件配置可控制程序的 ...