w3c-样式错位，不知什么原因？

问题描述

样式错位，不知什么原因？

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .strap {
        font-size: 0;
    }

    .strap>* {
        display: inline-block;
    }

    .footer-content {
        height: 254px;
    }

    .footer-narrow_wrapper {
        width: 112px;
        height: 253px;
    }

    .footer-wide_wrapper {
        width: 357px;
        height: 253px;
    }

    .footer-qrcode_wrapper {
        width: 232px;
        height: 253px;
    }

    .footer-square {
        width: 110px;
        height: 110px;
        line-height: 110px;
        border: 1px solid black;
        font-size: 13px;
        color: rgb(128, 128, 128);
        text-align: center;
    }

    .footer-rectangle {
        width: 355px;
        height: 107px;
        border: 1px solid black;
        line-height: 110px;
        text-align: center;
        font-size: 18px;
        color: rgb(128, 128, 128);
    }

    .footer-qrcode {
        width: 230px;
        height: 230px;
        border: 1px solid black;
        font-size: 12px;
        color: rgb(51, 51, 51);
    }
    </style>
</head>

<body>
    <div class="footer-content content strap">
        <div class="footer-narrow_wrapper">
            <div class="footer-square">关于我们</div>
            <div class="footer-square">服务条款</div>
        </div>
        <div class="footer-narrow_wrapper">
            <div class="footer-square">隐私政策</div>
            <div class="footer-square">帮助中心</div>
        </div>
        <div class="footer-wide_wrapper">
            <div class="footer-rectangle">4000-987-805</div>
            <div class="footer-rectangle">help@renrenma.com</div>
        </div>
        <div class="footer-wide_wrapper">
            <div class="footer-rectangle">3041507598</div>
            <div class="footer-rectangle">@人人码官方微博</div>
        </div>
        <div class="footer-qrcode_wrapper">
            <div class="footer-qrcode"></div>
        </div>
    </div>
</body>

</html>

元素的顶部不能对齐，搞不清楚是什么原因，谁能讲解下
就

解决方案

 .strap>*{
    display: inline-block;
    vertical-align:top;/*加上这个*/
}

解决方案二：

应该是代码书写不规范导致

解决方案三：

.strap>{
display: inline-block;
vertical-align:top;/加上这个*/
}

解决方案四：

_这样写代码是有问题的，.footer-narrow_wrapper，.footer-wide_wrapper,.footer-qrcode_wrapper中加float:left;当然，这样的样式最好table布局吧

解决方案五：

_这样写代码是有问题的，.footer-narrow_wrapper，.footer-wide_wrapper,.footer-qrcode_wrapper中加float:left;当然，这样的样式最好table布局吧

时间： 2024-09-30 15:10:50

w3c-样式错位，不知什么原因？的相关文章

不是有效的虚拟路径???不知什么原因

问题描述 "/863171zh"应用程序中的服务器错误.--------------------------------------------------------------------------------"~/http://www.863171.com/images/joincom.jpg"不是有效的虚拟路径.说明:执行当前Web请求期间,出现未处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息.异常详细信息:System

CSS网页布局错位:CSS宽度计算

文章简介:CSS网页布局错位. 为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么计算CSS宽度例一:我们计算一个左右结构的布局样式.假如总宽度为400px,那么左右加起来就应当小于400px,那我们可能左边为300px,右边为100px正确代码: <!DOCTYPE html><head><meta http-equiv=&q

给.NET中的Windows窗体加载Xp样式

window|加载给.NET中的Windows窗体加载Xp样式作者:Heath Stewart 介绍当Windows XP 带着他特有的可视化样式或者主题发布时,许多人为他拥有的华丽界面而兴奋.然而,当.NET1.0正式版本发布的时候,许多人包括我自己为Windows 窗体不支持Windows XP 的可视化样式而失望.我对可视化样式的API函数和微软的.NET框架开发文档进行了一番研究,而后认识到为.NET应用程序加上Xp样式也不是很难. 下面的将通过一个简单的程序来为你的程序和控件加上

struts2.1.8+hibernate2.5.6+spring3.0常见异常原因和解决方案

经过暑期两个月对ssh2的学习和OA项目的实战训练,我对J2EE技术中著名的三大框架ssh2已渐渐有所理解和掌握.从搭建ssh2框架环境开始到写出第一个简单的ssh2登陆程序,到最后整个OA项目的实战, 期间遇到了重重困难和阻碍, 就连搭建环境就花了整整一天的功夫,而成功运行第一个ssh2程序更花了好几天,当然我相信这是大部分学习ssh2这门技术都会经历的过程,相信也是每个程序员学习任何一门新的技术都会走的路程.如今,项目已成功收尾,在这欣喜之余,我也愿意将我学习ssh2中遇到的一些常见异常问题

Warning: $HADOOP_HOME is deprecated.的原因以及解决方法

今天把hadoop从0.20.2版本升级到1.2.1版本之后,在很多时候都会报如下警告:Warning: $HADOOP_HOME is deprecated. 其实我刚看到这个警告的时候,第一反应并不是怎么屏蔽掉它,而是想知道Apache为什么准备废弃掉HADOOP_HOME这个环境变量,因为我们知道,后面好多地方都会用到这个环境变量. 在Google上搜到的结果都是关于如何屏蔽掉这个警告的,据说这个警告会影响到后面Hive程序的执行,没有人解释官方为什么会给这

将样式表放在顶部——高性能网站建设指南规则5（读书笔记）

PS:以下内容仅仅为个人读书笔记,如有错漏,随时欢迎指正.同时希望能有更多的前端爱好者们共同分享你们的心得! 背景阅读<高性能网站建设指南>第五章,文章中, 作者建议最好将CSS文件(样式表)放在文档顶部,即<head>标签之间.当然这是在一定的应用前提之下的--该样式表在页面呈现时可能并不需要,而是作用于由于用户与页面的交互行为而产生的动态标签.比方说你点击某个显示有"猛击我吧!!"的连接,然后页面弹出个DIV,用绿色字体和 24px的字号大小显示的标准国

android 无法生成R文件的原因剖析

android 无法生成R文件是件痛苦的事情,即使有时候你xml文件没有错误,他都无法生成.针对此问题,我总结以下几个方面的原因. 一.xml本身有错误 R.java这个文件是会自动生成的,但是如果你不小心xml文件写错了,或者不小心在编辑xml的时候点击了run(其实这个时候会运行这个xml文件,会生成一个同名的xml文件,后缀为xx.out.xml),然后正巧你游clear了一下项目,你可能会发现gen下面的R.java的文件没有了,这个在刚开始的时候很气人,真不知道怎么解决,后来发现,只

求救！！asp.net中page_load执行了多次是什么原因？

问题描述不知什么原因,项目中的一个页面在进入的时候会多次(2次,3次或是4次)执行page_load,包括加上!ispostback之后,里面的代码还是执行多次,导致我数据库访问的时候连接冲突,因为前一个page_load线程刚打开连接,后一个page_load线程又要打开连接,因此数据库报错.在网上也看了很多别人说的,可能是<imgsrc="">或是页面自身有刷新或跳转以及将autoEventWireup设置为false等,这些方法都试过根本不好使.即便是将这个页面前台

Javascript在IE和FireFox中的不同表现

javascript 1. 对象问题 1.1 Form对象现有问题:现有代码这获得form对象通过document.forms("formName"),这样使用在IE 能接受,MF 不能.解决方法:改用作为下标运算.改为document.forms["formName"]备注上述的改用作为下标运算中的formName是id而name 1.2 HTML对象现有问题:在 IE 中,HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用.在