DIV 위치

Question

내가/사회에게

로고/메뉴 아래로

소개 왼쪽/내 된 div의 위치를 ​​시도하고 발행 소개를 오른쪽

backpicture

가운데 1

왼쪽 아래/오른쪽 하단

문제는 순간 div를이 같이 표시됩니다 (JSFiddle http://jsfiddle.net/A4Sn8/1/ 참조)

로고/메뉴

사회

backpicture

소개 왼쪽/소개 오른쪽

가운데 1

하단 - 좌측

오른쪽 아래

요약하면, "사회적"DIV는 오른쪽이 아닌 메뉴 아래에 있습니다. 오른쪽 하단 DIV는 오른쪽 대신에 왼쪽 아래에 있고, 사진은 왼쪽에서 왼쪽으로, 뒤에서는 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; 

} 

Answer 1

MAINMENU를 들어

와 사회가 한 줄에있을 :

은

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

은 주요 문제는 #mainmenu에 width:100%을 받았다. 이것은 social 블록이 오른쪽으로 오지 못하게했다. 더욱이 #mainmenu과 float:right에 float:left을 지정하면 social에서 트릭을 만들었습니다.

한 가지 더만, 귀하의 social에는 CSS가 없었으므로 #이 있습니다.

Answer 2

당신은 절대 픽셀 크기와 퍼센트 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/