0

我正在尝试将我的 DIV 定位如下

标志/菜单/社交

左前导/右前导

背景图片

中间1

左下/右下

问题是目前 DIV 显示如下（请参阅 JSFiddle http://jsfiddle.net/A4Sn8/1/）：

标志/菜单

社会的

背景图片

左前导/右前导

中间1

左下方

右下角

总之，我的“社交”DIV 位于菜单下方而不是右侧。右下角 DIV 在左下角而不是在它的右边，背景图在 Intro-left 之前和 intro-right 而不是之后。

我该如何解决这个问题？

非常感谢

HTML

 <div id="logo">Logo</div>  <!-- End DIV Logo -->
  <div id="mainmenu">
    <ul>
      <li>
        <h5>Menu I</h5>
        <ul>
          <li><a title="" href="">Biography</a> </li>
          <li><a title="" href="">Publications</a> </li>
        </ul>
      <li>
        <h5>Menu 2</h5>
        <ul>
          <li><a title="" href="">Demo</a> </li>
          <li><a title="" href="">Features</a> </li>
          <li><a title="" href="">Comparison</a> </li>
        </ul>
      </li>
      <li>
        <h5>Menu 3</h5>
        <ul>
          <li><a title="" href="">Item 1</a> </li>
          <li><a title="" href="">Item 2</a> </li>
          <li><a title="" href="">Item 3</a> </li>
        </ul>
      </li>
      <li>
        <h5>Menu 4</h5>
        <ul>
          <li><a title="" href="">ddfd</a> </li>
          <li><a title="" href="">dsfd</a> </li>
        </ul>
      </li>
    </ul>
  </div>  <!-- End DIV Main Menu -->
 <div id="social">Social</div>

    <div id="intro-left"></div>

    <div id="intro-right">
    <div id="content-headline"><h1>Novitates autem si spem</h1></div>  <!-- End DIV Content headline-->
      <p>Novitates sit.</p>

    </div> 

<div id="backpicture">backpicture</div>
<div id="middle-1">Middle-1</div>
<div id="bottom-left">bottom-left</div>
<div id="bottom-right">bottom-right</div>

CSS：

@charset"UTF-8";
/* CSS Document */

Html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #fff;
    font-family: 'Open Sans', sans-serif; 
}

#logo {
    position: absolute;
    top: 35px;
    left: 20px;
    color: #000;
    font-size: 20px;
}

/* mainmenu */

#mainmenu {
    margin-top: 35px;
    width: 100%;
    padding-bottom: 10px; 
    overflow: hidden;
}
#mainmenu ul {
    float: right;
    margin: 0;
    color: #000;
    list-style: none;
}
#mainmenu ul li {
    display: inline-block;
    float: left;
    width: 140px;
    line-height: 20px;
}
#mainmenu>ul>li {
    margin-left: 20px;
}
#mainmenu ul li a {
    display: block;
    text-decoration: none;
    font-weight:600;
    font-size: 12px;
}
#mainmenu ul li a, #mainmenu ul ul:hover li a {
    color: #333;
    -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -o-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -webkit-transition-duration: .4s, .4s, .4s, .4s;
    -moz-transition-duration: .4s, .4s, .4s, .4s;
    -ms-transition-duration: .4s, .4s, .4s, .4s;
    -o-transition-duration: .4s, .4s, .4s, .4s;
    transition-duration: .4s, .4s, .4s, .4s;
    -webkit-transition-property: all, -webkit-transform;
    -moz-transition-property: all, -moz-transform;
    -ms-transition-property: all, -ms-transform;
    -o-transition-property: all, -o-transform;
    transition-property: all, transform;
}
#mainmenu ul ul li a:hover, #mainmenu ul ul li.current-menu-item a {
    color: #005EBC;
    -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -o-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    transition-timing-function: ease-out, ease-in, linear, ease-in-out;
    -webkit-transition-duration: .4s, .4s, .4s, .4s;
    -moz-transition-duration: .4s, .4s, .4s, .4s;
    -ms-transition-duration: .4s, .4s, .4s, .4s;
    -o-transition-duration: .4s, .4s, .4s, .4s;
    transition-duration: .4s, .4s, .4s, .4s;
    -webkit-transition-property: all, -webkit-transform;
    -moz-transition-property: all, -moz-transform;
    -ms-transition-property: all, -ms-transform;
    -o-transition-property: all, -o-transform;
    transition-property: all, transform;
}

social {
    right: 10px;
    Color: blue;
}

p {
    color: #333;
    font-weight:300;
    font-size: 13px;
}
h1 {
    color: #00539E;
    font-size: 30px;
    }



#intro-left {
    float: left;
    width: 35%;
}

#intro-right {
    float: right;
    padding-right: 50px;
    width: 60%;
}
#backpicture {
    height:160px;
    width: 100%;
    background: blue;
}

#middle-1 {
    width: 980px;
    background: #c81919;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#bottom-left {
    float: left;
    width: 35%;
    background: #5421c2;
}

#bottom-right {
    float: right;
    padding-right: 50px;
    width: 60%;
    background: #2ec4a6;

}
4

2 回答 2

1

您将 CSS 规则与绝对像素大小和百分比混合在一起。这并不总是一个好主意。

您可能会遇到这个问题，因为您padding-right的 50px 大于剩余 5% 的可用空间。

我不确定您要实现什么，但我猜底部元素应该在相同的高度。尝试这个：

#bottom-right {
    float: right;
    padding-right: 5%; /* you defined 50px instead! */
    width: 60%;
    background: #2ec4a6;
}

示例：http: //jsfiddle.net/A4Sn8/2/

于 2013-09-05T12:31:14.630 回答
0

对于主菜单和社交在一行中：

#social {
    float:right;
    margin-top: 35px;
    right: 10px;
    color: blue;
}
#mainmenu {
    float:left;
    margin-top: 35px;
    width: 80%;
    padding-bottom: 10px; 
    overflow: hidden;
}

主要问题已width:100%交给#mainmenu. 这不允许social块向右移动。此外，指定float:leftin#mainmenu和float:rightinsocial起到了作用。

还有一件事，你social在 css 中没有#。

于 2013-09-05T12:47:18.900 回答