html – 为什么高度不会影响我的div？

概述我的网站标题出现问题,我不能为我的生活搞清楚.我想将标题分成两列.标题的高度应由左列内的h1和p标签的内容决定.右列应分为两行,高度相等,包含导航菜单和社交链接.我想在父div的中心垂直对齐每个菜单.出于某种原因,高度属性根本不会改变那些右列行的高度.我究竟做错了什么？有一个更好的方法吗？这是一个 jsFiddle,向您展示我目前正在获得的.谢谢你的时间. HTML： <header> <di 我的网站标题出现问题,我不能为我的生活搞清楚.我想将标题分成两列.标题的高度应由左列内的h1和p标签的内容决定.右列应分为两行,高度相等,包含导航菜单和社交链接.我想在父div的中心垂直对齐每个菜单.出于某种原因,高度属性根本不会改变那些右列行的高度.我究竟做错了什么？有一个更好的方法吗？这是一个 jsFiddle,向您展示我目前正在获得的.谢谢你的时间.

HTML：

@H_404_13@<header> <div ID="banner"> <div > <div ID="banner-inner"> <div ID="banner-left"> <h1>Site name</h1> <p>Some catchy slogan...</p> </div> <div ID="banner-right"> <div ID="banner-top"> <ul> <li>Find Me On:</li> <li><a href+ "#" title="Facebook"><i ></i></a></li> <li><a href+ "#" title="Twitter"><i ></i></a></li> <li><a href+ "#" title="linkedIn"><i ></i></a></li> <li><a href+ "#" title="Instagram"><i ></i></a></li> </ul> </div> <div ID="banner-bottom"> <nav> <ul ID="menu-menu-1" > <li><a title="Home" href+ "#">Home</a></li> <li><a title="Blog" href+ "#">Blog</a></li> <li><a title="Resources" href+ "#" data-toggle="dropdown" aria-haspopup="true">Resources <span ></span></a> <ul role="menu" > <li><a title="HTML &amp; CSS" href+ "#">HTML &#038; CSS</a></li> <li><a title="JavaScript &amp; jquery" href+ "#">JavaScript &#038; jquery</a></li> <li><a title="PHP" href+ "#">PHP</a></li> <li><a title="MysqL" href+ "#">MysqL</a></li> </ul> </li> <li><a title="Portfolio" href+ "#" data-toggle="dropdown" aria-haspopup="true">Portfolio <span ></span></a> <ul role="menu" > <li><a title="Web Designs" href+ "#">Web Designs</a></li> <li><a title="Photo gallery" href+ "#">Photo gallery</a></li> <li><a title="Development Projects" href+ "#">Development Projects</a></li> <li><a title="Graphic Designs" href+ "#">Graphic Designs</a></li> </ul> </li> <li><a title="Services" href+ "#">Services</a></li> <li><a title="About" href+ "#">About</a></li> <li><a title="Contact" href+ "#">Contact</a></li> </ul> </nav> </div> </div> </div> </div> </div></header>

CSS：

@H_404_13@header { background: #D7DADB; margin: 0px; padding: 0px 15px; border-bottom: 15px solID #FC4349; display: table; position: relative; wIDth: 100%;}header #banner { padding: 5px; display: table; position: relative; wIDth: 100%; color: #2C3E50; margin: 0px;}header #banner #banner-inner { wIDth: 100%;}header #banner #banner-left { padding: 0px 25px 0px 0px; float: left;}header #banner #banner-left h1 { Font-size: 4em; color: #FC4349; Font-family: PowerChord; -webkit-text-stroke-wIDth: 1px; -webkit-text-stroke-color: #fff; margin: 0px; padding: 0px; line-height: 1.3em;}header #banner-left p { Font-size: 1.7em; Font-family: Nirmala; color: #2C3E50; margin: 0px 0px 10px 0px; line-height: 1.3em;}header #banner #banner-right { text-align: right; height: 100%; float: right;}header #banner #banner-right #banner-top { text-align: right; height: 50%; overflow: auto;}header #banner #banner-right #banner-top ul { List-style: none; wIDth: 100%; text-align: right; margin: 0; padding: 0;}header #banner #banner-right #banner-top > ul > li { display: inline-block; margin-right: 15px;}header #banner #banner-right #banner-top > ul > li a { Font-size: 1.5em; color: #FC4349;}header #banner #banner-right #banner-bottom { border-top: 1px solID #6DBCDB; text-align: right;}header #banner #banner-right #banner-bottom > nav { position: relative;}.nav.navbar-nav { position: relative;}.nav.navbar-nav > li > a { color: #2C3E50; Font-family: NirmalaBold; Font-size: 1.3em; padding: 5px 5px;}.nav.navbar-nav > li > a:hover { background: #FC4349; color: #fff;}.nav.navbar-nav > li > a:focus { background: #6DBCDB; color: #fff;}.dropdown-menu { background: #fff; border: 1px solID #FC4349; border-bottom: 0px; padding: 0px;}.dropdown-menu > li { border-bottom: 1px solID #FC4349;}.dropdown-menu > li > a { color: #FC4349; text-decoration: none; padding: 15px 25px 15px 10px;}.dropdown-menu > li > a:hover{ background: #FC4349; color: #fff;}

这就是我希望它看起来像：

解决方法 我想这会做到：

https://jsfiddle.net/2k5p2cwg/

@H_404_13@header { background: #D7DADB; margin: 0px; padding: 0px 15px; border-bottom: 15px solID #FC4349; display: table; position: relative; wIDth: 100%;}header #banner { padding: 5px; display: table; position: relative; wIDth: 100%; color: #2C3E50; margin: 0px;}header #banner #banner-inner { wIDth: 100%;}header #banner #banner-left { padding: 0px 25px 0px 0px; float: left;}header #banner #banner-left h1 { Font-size: 4em; color: #FC4349; Font-family: PowerChord; -webkit-text-stroke-wIDth: 1px; -webkit-text-stroke-color: #fff; margin: 0px; padding: 0px; line-height: 1.3em;}header #banner-left p { Font-size: 1.7em; Font-family: Nirmala; color: #2C3E50; margin: 0px 0px 10px 0px; line-height: 1.3em;}header #banner #banner-right { text-align: right; height: 100%; float: right;}header #banner #banner-right #banner-top { text-align: right; height: 50%; overflow: auto;}header #banner #banner-right #banner-top ul { List-style: none; wIDth: 100%; text-align: right; margin: 0; padding: 0;}header #banner #banner-right #banner-top > ul > li { display: inline-block; margin-right: 15px;}header #banner #banner-right #banner-top > ul > li a { Font-size: 1.5em; color: #FC4349;}header #banner #banner-right #banner-bottom { border-top: 1px solID #6DBCDB; text-align: right;}header #banner #banner-right #banner-bottom > nav { position: relative;}.nav.navbar-nav { position: relative;}.nav.navbar-nav > li > a { color: #2C3E50; Font-family: NirmalaBold; Font-size: 1.3em; padding: 5px 5px;}.nav.navbar-nav > li > a:hover { background: #FC4349; color: #fff;}.nav.navbar-nav > li > a:focus { background: #6DBCDB; color: #fff;}.dropdown-menu { background: #fff; border: 1px solID #FC4349; border-bottom: 0px; padding: 0px;}.dropdown-menu > li { border-bottom: 1px solID #FC4349;}.dropdown-menu > li > a { color: #FC4349; text-decoration: none; padding: 15px 25px 15px 10px;}.dropdown-menu > li > a:hover{ background: #FC4349; color: #fff;}/* New CSS styles */HTML,body{ height: 100%;}#banner-inner:before,#banner-inner:after { content: ""; display: table;} #banner-inner:after { clear: both;}#banner-inner { zoom: 1; /* For IE 6/7 (trigger hasLayout) */ position: relative;}header #banner #banner-right { position: absolute; right: 0;}header #banner #banner-right #banner-top,header #banner #banner-right #banner-bottom{ display: table; height: 50%; wIDth: 100%;}header #banner #banner-right #banner-top ul,header #banner #banner-right #banner-bottom > nav { display: table-cell; vertical-align: mIDdle;} @H_404_13@<header> <div ID="banner"> <div > <div ID="banner-inner"> <div ID="banner-left"> <h1>Site name</h1> <p>Some catchy slogan...</p> </div> <div ID="banner-right"> <div ID="banner-top"> <ul> <li>Find Me On:</li> <li><a href+ "#" title="Facebook"><i ></i></a></li> <li><a href+ "#" title="Twitter"><i ></i></a></li> <li><a href+ "#" title="linkedIn"><i ></i></a></li> <li><a href+ "#" title="Instagram"><i ></i></a></li> </ul> </div> <div ID="banner-bottom"> <nav> <ul ID="menu-menu-1" > <li><a title="Home" href+ "#">Home</a></li> <li><a title="Blog" href+ "#">Blog</a></li> <li><a title="Resources" href+ "#" data-toggle="dropdown" aria-haspopup="true">Resources <span ></span></a> <ul role="menu" > <li><a title="HTML &amp; CSS" href+ "#">HTML &#038; CSS</a></li> <li><a title="JavaScript &amp; jquery" href+ "#">JavaScript &#038; jquery</a></li> <li><a title="PHP" href+ "#">PHP</a></li> <li><a title="MysqL" href+ "#">MysqL</a></li> </ul> </li> <li><a title="Portfolio" href+ "#" data-toggle="dropdown" aria-haspopup="true">Portfolio <span ></span></a> <ul role="menu" > <li><a title="Web Designs" href+ "#">Web Designs</a></li> <li><a title="Photo gallery" href+ "#">Photo gallery</a></li> <li><a title="Development Projects" href+ "#">Development Projects</a></li> <li><a title="Graphic Designs" href+ "#">Graphic Designs</a></li> </ul> </li> <li><a title="Services" href+ "#">Services</a></li> <li><a title="About" href+ "#">About</a></li> <li><a title="Contact" href+ "#">Contact</a></li> </ul> </nav> </div> </div> </div> </div> </div></header> 总结

以上是内存溢出为你收集整理的html – 为什么高度不会影响我的div？全部内容，希望文章能够帮你解决html – 为什么高度不会影响我的div？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。