• 多个div并排显示的居中问题——来自腾讯的一道面试题


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

    自己太水了,且面试官对我可能也有点不爽,说什么还没叫我我就去了,可是尼玛写的面试时间是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>

    运行效果:

    image

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

    image

    一样可以实现自动居中

  • 相关阅读:
    Matlab编辑器背景修改
    Booksim的运行
    illustrator画梯形
    latex去掉页眉
    latex字体颜色
    latex字体
    Methods to reduce the number of pipeline stages
    Basic Router Architecture
    Linux /sbin/service脚本一个基本无影响的bug
    HTML5实战之桌面通知
  • 原文地址:https://www.cnblogs.com/audi-car/p/4820564.html
Copyright © 2020-2023  润新知