Css 页脚元素不浮动_Css_Html_Flexbox_Css Float

Css 页脚元素不浮动

css html

Css 页脚元素不浮动,css,html,flexbox,css-float,Css,Html,Flexbox,Css Float,我试图创建的是一个页脚，页脚下有联系人和社交媒体，版权在页脚的另一侧。这是我试图完成的一个图像。如果我的代码看起来不完整，那是因为我正在为桌面版本的媒体查询编码 /*! HTML5样板v6.1.0 | MIT许可证|https://html5boilerplate.com/ */ /* *下面是对跨浏览器样式的大量研究的结果。 *感谢Nicolas Gallagher Jonathan Neal， *Kroc Camen以及H5BP开发社区和团队。 */ /* ================

我试图创建的是一个页脚，页脚下有联系人和社交媒体，版权在页脚的另一侧。这是我试图完成的一个图像。如果我的代码看起来不完整，那是因为我正在为桌面版本的媒体查询编码

/*! HTML5样板v6.1.0 | MIT许可证|https://html5boilerplate.com/ */ /* *下面是对跨浏览器样式的大量研究的结果。 *感谢Nicolas Gallagher Jonathan Neal， *Kroc Camen以及H5BP开发社区和团队。 */ /* ========================================================================== 基本风格：固执己见的默认设置 ========================================================================== */ html{ 颜色：222；字号：1em；线高：1.4； } /* *删除选择突出显示中的文本阴影： * https://twitter.com/miketaylr/status/12228805301 * *供应商前缀和常规：：选择选择器不能组合使用： * https://stackoverflow.com/a/16982510/7133471 * *自定义背景色以匹配您的设计。 */ ：-moz选择{ 背景：b3d4fc；文本阴影：无； } ：：选择{ 背景：b3d4fc；文本阴影：无； } /* *外观更好的默认水平规则 */ 人力资源{ 显示：块；高度：1px；边界：0；边框顶部：1px实心ccc；利润率：1米0；填充：0； } /* *消除音频、画布、iFrame之间的间隙， *图像、视频及其容器底部： * https://github.com/h5bp/html5-boilerplate/issues/440 */ 音频帆布 iframe， img， svg，录像带{ 垂直对齐：中间对齐； } /* *删除默认字段集样式。 */ 字段集{ 边界：0；保证金：0；填充：0； } /* *仅允许垂直调整文本区域的大小。 */ 文本区{ 调整大小：垂直； } /* ========================================================================== 浏览器升级提示 ========================================================================== */ .浏览器升级{ 边际：0.2米0；背景：ccc；颜色：000；填充：0.2米0； } /* ========================================================================== 作者的自定义样式 ========================================================================== */ /*一般风格*/ html{ 字体大小：16px； } 身体{ 字号：1em；字体系列：“Myriad Pro”；颜色：000000；文本对齐：左对齐； } 李先生{ 列表样式类型：无；保证金：0；填充：0； } a{ 颜色：ffffff；文字装饰：无； } p{ 字体大小：.875em；线高：1.285； } 标题图a img{ 宽度：100%； } 导航img{ 宽度：50px；高度：50px； } .内容包装器{ 宽度：100%； } /*------基本页眉-页脚样式-------*/ 页眉、页脚{ 背景色：e229a3；显示器：flex；证明内容：中心；对齐项目：居中；柔性流：行换行； } 标题{ 填充：15px0； } header.content包装器{ 保证金：0；显示器：flex；证明内容：中心；对齐项目：居中；柔性流：行换行； } 标题图{ 显示器：flex；证明内容：中心；对齐项目：居中；柔性流：行换行； } .割台分隔器{ 背景：a8eb6c；高度：3倍；宽度：100%；利润率：10px 0 20px 0； } 标题导航{ 宽度：50%；字号：2.125em；显示器：flex；证明内容：周围的空间；对齐项目：居中；柔性流：行换行； } 标题导航ul{ 宽度：100%；显示器：flex；证明内容：周围的空间； } 标题nav ul li{ 字号：1.125em； } 页脚{ 文本对齐：居中；弯曲方向：立柱；颜色：ffffff； } 页脚p{ 保证金：0； } 页脚.内容包装器{ 宽度：15%；利润率：10px0； } 页脚.内容包装器h4{ 字体系列：“Myriad pro”；字号：2.125em；字体重量：较轻；文本对齐：居中； } 页脚。社交图标{ 显示器：flex；证明内容：之间的空间；对齐项目：居中； } 页脚.社交图标{ 背景色：a8eb6c；边界半径：50%；宽度：70px；高度：70像素；显示器：flex；证明内容：中心；对齐项目：居中； } 页脚.社交图标p i{ 字号：2.125em； } .页脚.社交{ 显示器：flex；证明内容：之间的空间；对齐项目：居中； } 页脚。版权所有{ 利润率：20px0；字号：2.125em； } /*------手机风格-主页-------*/ 内容包装器{ 文本对齐：居中；对齐项目：居中； } 主h1{ 字体：斜体；字体大小：50px；文本对齐：居中；利润率：60px 0 60px 60px； } 主要人物img{ 边框：10px实心a8eb6c；利润率：0.16px 0.0；宽度：500px；高度：500px；利润率：0 10px 0 10px； } 主图形按钮{ 背景色：a8eb6c；利润率：30px 0 30px 0；对齐项目：居中；字体系列：“Myriad Pro”；字号：2.125em； } 主图figcaption{ 利润率：30px0；对齐项目：居中；字体系列：“Myriad Pro”；字号：2em； } /* ========================================================================== 助手类 ========================================================================== */ /* *对屏幕阅读器进行可视和隐藏 */ .隐藏{ 显示：无！重要； } /* *仅在视觉上隐藏，但可供屏幕阅读器使用： * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility * * 1. 对于长内容，换行不能解释为空格和小宽度 *使内容每行换行1个单词： * https://medium.com/@Jessebach/careed-smushed-off-screen-accessible-text-5952a4c2cbfe */ .视觉隐藏{ 边界：0；剪辑：rect0；高度：1px；保证金：-1px；溢出：隐藏；填充：0；位置：绝对位置；宽度：1px；空白：nowrap；/*1*/ } /* *扩展.visuallyhidden类以允许元素 *通过键盘导航到时可聚焦： * https://www.drupal.org/node/897638 */ .视觉隐藏。可聚焦：活动， .视觉隐藏.聚焦：聚焦{ 剪辑：自动；高度：自动；保证金：0；溢出：可见；位置：静态；宽度：自动；空白：继承； } /* *对屏幕阅读器进行可视和隐藏，但保持布局 */ .无形的{ 可见性：隐藏； } /* *Clearfix：包含浮动 * *适用于现代浏览器 * 1. 空间内容是避免Opera错误的一种方法，当 *“contenteditable”属性包含在文档中的任何其他位置。 *否则，它会在元素的顶部和底部显示空间 *接收“clearfix”类的。 * 2. 只有在使用时才需要使用“table”而不是“block” *`:before`包含子元素的上边距。 */ .clearfix:之前， .clearfix:之后{ 内容：；/*1*/ 显示：表格；/*2*/ } .clearfix:之后{ 明确：两者皆有； } /* ========================================================================== 响应式设计的媒体查询示例。这些示例覆盖了主要的“移动优先”样式。根据内容需要进行修改。 ========================================================================== */ @仅介质屏幕和最小宽度：1200px{ /*一般风格*/ .内容包装器{ 最大宽度：100%；利润率：100px0； } /*标题*/ 标题{ 证明内容：周围的空间；身高：40%； } header.content包装器{ 宽度：100%；证明内容：之间的空间； } 标题图{ 宽度：40%；浮动：左； } 标题导航{ 宽度：20%；浮动：左；填充：60px；字号：1.125em； } 标题导航ul{ 证明内容：之间的空间；右边填充：60px； } .割台分隔器{ 显示：无； } /*主要*/ 主h1{ 字体：斜体；字体大小：3.5em；文本对齐：居中；保证金：60px 0 60px 0； } 主要人物{ 文本对齐：居中；宽度：30%；浮动：左； } 身材{ 利润率：1米20像素； } 主要人物img{ 边框：10px实心a8eb6c；宽度：300px；高度：300px； } 主图figcaption{ 字号：1.125em； } 主图形按钮{ 背景色：a8eb6c；字号：1.125em；字体系列：“Myriad pro”； } 页脚{ 背景色：e229a3；背景大小：50%100%；明确：两者皆有； } 页脚.内容包装器{ 宽度：50%；字号：1.125em；显示：内联块；浮动：左； } 页脚.内容包装器h4{ 颜色：000000；字号：1.125em；文本对齐：右对齐；右侧填充：150px； } 页脚a{ 颜色：000000；文字装饰：无； } 页脚。社交图标{ 填充：0 150px 0 15px；证明内容：柔性端；保证金： } 页脚.社交图标{ 宽度：30px；高度：30px；利润率：0.10px； } 页脚.社交图标p i{ 字号：1.125em； } 页脚。版权所有{ 字号：1.125em；宽度：50%；文本对齐：左对齐；左侧填充：150px；显示：内联块；浮动：左； } } @媒体印刷， -webkit最小设备像素比：1.25，最小分辨率：1.25dppx，最小分辨率：120dpi{ /*高分辨率设备的样式调整*/ } /* ========================================================================== 打印样式。内联以避免额外的HTTP请求： https://www.phpied.com /延迟加载打印css/ ========================================================================== */ @媒体印刷品{ *, *：之前， *：之后{ 背景：透明！重要；颜色：000！重要；/*黑色打印速度更快*/ -网络工具包盒阴影：无！重要；盒影：无！重要；文本阴影：无！重要； } A. a:参观了{ 文字装饰：下划线； } a[href]：之后{ 内容：attrref； } 缩写[标题]：在{ 内容：标题； } /* *不显示作为片段标识符的链接， *或者使用`javascript:`伪协议 */ a[href^=]：在， a[href^=javascript:]：之后{ 内容：； } 前{ 空白：预包装！重要； } 之前，大宗报价{ 边框：1px实心999；内部分页符：避免； } /* *打印表格： * http://css-discuss.incutio.com/wiki/Printing_Tables */ 泰德{ 显示：表头组； } tr， img{ 内部分页符：避免； } P h2， h3{ 孤儿：3名；寡妇：3人； } h2， h3{ 换页后：避免； } } 艺术攻击创造力是令人惊奇的东西的燃料！钱包•上衣•裙子耸人听闻的缝纫耳环•吊坠•粘土项链创意魅力围巾•连指手套•毛绒脱模针织联系

您的想法是正确的，希望下面的代码会有所帮助。您可以引入媒体查询，但下面的版本始终是响应的

页脚{ 位置：固定；左：0；底部：0；宽度：100%；背景色：e229a3；颜色：白色；文本对齐：居中； } 页脚.内容包装器{ 宽度：30%；字号：1.125em；显示：内联块；浮动：对； } footer.content包装器p{ 颜色：fff；字号：1.125em；文本对齐：右对齐；右边填充：40px；保证金：5px0； } 页脚a{ 颜色：000000；文字装饰：无； } 页脚。社交图标{ 填充：0 30px 10px 0；证明内容：柔性端；浮动：对； } 页脚.社交图标{ 宽度：30px；高度：30px；利润率：0.18px； } 页脚.社交图标p i{ 字号：1.125em； } 页脚。版权所有{ 字号：1.125em；宽度：70%；文本对齐：左对齐；浮动：左；利润率：9px0； } 页脚。版权所有{ 左侧填充：10px； } 页脚.社交图标分区{ 最小高度：30px；最小宽度：30px；浮动：对；利润率：0.5px；边框：1px点黑色； } 嗨，丝儿，我想这可能就是你要找的

接触

使用flexbox很容易做到这一点：

使页脚成为flexbox，并指定对齐项目：居中以垂直居中

将内容包装器设为列flexbox，并将h4和社交图标一个接一个地对齐

社交图标也可以是一个flexbox，用于将图标排成一行，而不是放在另一行的下面

请参见下面的演示：

页脚{ 背景色：e229a3；背景大小：50%100%；显示：flex；/*定义flexbox*/ 弹性方向：行反转；/*反转项目*/ 对齐项目：居中；/*对齐到中心*/ } 页脚.内容包装器{ 宽度：50%；字号：1.125em；显示：flex；/*定义flexbox*/ 弯曲方向：列；/*列flexbox*/ 对齐项目：柔性末端；/*水平对齐末端*/ 右边填充：25px； } 页脚.内容包装器h4{ 颜色：000000；字号：1.125em；文本对齐：右对齐；右边填充：10px； } 页脚a{ 颜色：000000；文字装饰：无； } 页脚。社交图标{ 显示：flex；/*定义flexbox*/ } 页脚.社交图标{ 宽度：30px；高度：30px；利润率：0.10px； } 页脚.社交图标p i{ 字号：1.125em； } 页脚。版权所有{ 字号：1.125em；宽度：50%；文本对齐：左对齐；左侧填充：25px； } 联系

这正是我要找的！我做错了什么？出于某种原因，当我尝试使用此代码时，它会把我的代码弄乱。我想这是因为你的页脚已经修好了。我所说的媒体查询是指我

为网站的媒体查询编码，因为我先对手机进行了编码。你说把代码弄乱是什么意思？你能分享一个截图吗？这也是移动第一，版权部分是宽度的70%，其余是30%。。。通过这种方式，我们可以避免媒体提问如何共享屏幕截图？我用我的全部代码和您要求的屏幕截图更新了问题。非常感谢你帮助我。我非常感谢。也许你可以添加完整的代码供我们研究，我尝试过的问题中的代码不可复制，所发生的不是显示桌面版本，而是显示了移动版本。您想查看我的整个代码还是移动设备的其他页脚代码？整个代码很好，这样我们就可以了解发生了什么：@kukkuz it工作！非常感谢！我非常感激。我理解我的错误所在。您应该提供一个，我们不想解析您的所有代码。OP先前提供了最少的代码，但无法使用下面的答案解决问题，因此完整的代码：