Question

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

HTML：

<header>
  <div id="banner">
    <div class="container">
      <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 class="fa fa-facebook-square"></i></a></li>
              <li><a href+ "#" title="Twitter"><i class="fa fa-twitter-square"></i></a></li>
              <li><a href+ "#" title="LinkedIn"><i class="fa fa-linkedin-square"></i></a></li>
              <li><a href+ "#" title="Instagram"><i class="fa fa-instagram"></i></a></li>
            </ul>
          </div>
          <div id="banner-bottom">
            <nav>
              <ul id="menu-menu-1" class="nav navbar-nav">
                <li><a title="Home" href+ "#">Home</a></li>
                <li><a title="Blog" href+ "#">Blog</a></li>
                <li><a title="Resources" href+ "#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Resources <span class="caret"></span></a>
                  <ul role="menu" class=" dropdown-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" class="dropdown-toggle" aria-haspopup="true">Portfolio <span class="caret"></span></a>
                  <ul role="menu" class=" dropdown-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：

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;
}

这就是我想要的样子：

Answer 1

我认为这样做会：

https://jsfiddle.net/2k5p2cwg/

＆＃13;

java.lang.NoSuchMethodError: org.springframework.core.annotation.AnnotatedElementUtils.findMergedAnnotationAttributes(Ljava/lang/reflect/AnnotatedElement;Ljava/lang/String;ZZ)Lorg/springframework/core/annotation/AnnotationAttributes;

at org.springframework.test.util.MetaAnnotationUtils$AnnotationDescriptor.<init>(MetaAnnotationUtils.java:290)
at org.springframework.test.util.MetaAnnotationUtils$UntypedAnnotationDescriptor.<init>(MetaAnnotationUtils.java:365)
at org.springframework.test.util.MetaAnnotationUtils$UntypedAnnotationDescriptor.<init>(MetaAnnotationUtils.java:360)
at org.springframework.test.util.MetaAnnotationUtils.findAnnotationDescriptorForTypes(MetaAnnotationUtils.java:191)
at org.springframework.test.util.MetaAnnotationUtils.findAnnotationDescriptorForTypes(MetaAnnotationUtils.java:198)
at

＆＃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;
}

＆＃13;

Answer 2

当你在元素上提供float属性时，你应该在其父元素上给出clearfix，这就是为什么不能获得#banner-inner元素的高度。

这是用于实现正确元素高度并在垂直对齐中心制作内容的新css。

新的css行

/* 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;
}

更新了小提琴：https://jsfiddle.net/nikhilvkd/pvhw11eq/2/

Answer 3

这是新的CSS：

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: 450px;
    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;
}

这是你想要的效果吗？

Answer 4

请尝试我的代码

   

 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;
    margin-top: 18px;
    padding-top: 18px;
}
header #banner #banner-right #banner-bottom > nav {
    position: relative;
    display: inline-block;
}
.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;
}`enter code here`

    <header>
      <div id="banner">
        <div class="container">
          <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 class="fa fa-facebook-square"></i></a></li>
                  <li><a href+ "#" title="Twitter"><i class="fa fa-twitter-square"></i></a></li>
                  <li><a href+ "#" title="LinkedIn"><i class="fa fa-linkedin-square"></i></a></li>
                  <li><a href+ "#" title="Instagram"><i class="fa fa-instagram"></i></a></li>
                </ul>
              </div>
              <div id="banner-bottom">
                <nav>
                  <ul id="menu-menu-1" class="nav navbar-nav">
                    <li><a title="Home" href+ "#">Home</a></li>
                    <li><a title="Blog" href+ "#">Blog</a></li>
                    <li><a title="Resources" href+ "#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Resources <span class="caret"></span></a>
                      <ul role="menu" class=" dropdown-menu">
                        <li><a title="HTML &amp; CSS" href+ "#">HTML &#038; CSS</a></li>

Answer 5

认为你应该试试这个

复制cssáfollow：

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;
}

对于Html

<header>
  <div id="banner">
    <div class="container">
      <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 class="fa fa-facebook-square"></i></a></li>
              <li><a href="#" title="Twitter"><i class="fa fa-twitter-square"></i></a></li>
              <li><a href="#" title="LinkedIn"><i class="fa fa-linkedin-square"></i></a></li>
              <li><a href="#" title="Instagram"><i class="fa fa-instagram"></i></a></li>
            </ul>
          </div>
          <div id="banner-bottom">
            <nav>
              <ul id="menu-menu-1" class="nav navbar-nav">
                <li><a href="#" title="Home">Home</a></li>
                <li><a href="#" title="Blog">Blog</a></li>
                <li><a href="#" title="Resources"data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Resources <span class="caret"></span></a>
                  <ul role="menu" class=" dropdown-menu">
                    <li><a href="#" title="HTML &amp; CSS">HTML &#038; CSS</a></li>
                    <li><a href="#" title="JavaScript &amp; jQuery">JavaScript &#038; jQuery</a></li>
                    <li><a href="#" title="PHP">PHP</a></li>
                    <li><a href="#" title="MySQL">MySQL</a></li>
                  </ul>
                </li>
                <li><a href="#" title="Portfolio" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Portfolio <span class="caret"></span></a>
                  <ul role="menu" class=" dropdown-menu">
                    <li><a href="#" title="Web Designs">Web Designs</a></li>
                    <li><a href="#" title="Photo Gallery">Photo Gallery</a></li>
                    <li><a href="#" title="Development Projects">Development Projects</a></li>
                    <li><a href="#" title="Graphic Designs">Graphic Designs</a></li>
                  </ul>
                </li>
                <li><a href="#" title="Services">Services</a></li>
                <li><a href="#" title="About">About</a></li>
                <li><a href="#" title="Contact">Contact</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

为什么身高不影响我的div？

5 个答案: