두 div가 서로 옆에 있도록하려면 어떻게해야합니까?

화면의 왼쪽에서 navbar를 만들고 navbar 바로 옆에서 텍스트 div를 만들어야합니다. 나는 텍스트 div를 화면의 오른쪽으로 줄이는 작업 만했습니다. 지금까지 나는이 있습니다두 div가 서로 옆에 있도록하려면 어떻게해야합니까?

HTML

<head> 

<link rel = "stylesheet" type = "text/css" href = "styles.css"> 
<title>Homepage</title> 

</head> 

<body> 
<div id = "header"> 
    <h1>Homepage - origins of World Wide Web and the Internet</h1> 
</div> 
<div id = "wrapper"> 
    <div id = "navbar"> 
     <ul> 
     <li><a class = "active" href="index.html">HOMEPAGE</a></li> 
     <li><a href="news.asp">INTERNET PIONEERS</a></li> 
     <li><a href="contact.asp">HTTP</a></li> 
     <li><a href="about.asp">TERMINOLOGY</a></li> 
     <li><a href="about.asp">REFERENCES</a></li> 
     </ul> 
    </div> 

    <div id = "text"> 
     <h2>World Wide Web</h2> 

    </div> 
</div>

CSS :

#header { 


width: 97%; 
    height: 70px; 
    background: black; 
    position: relative; 
    border: 5px solid white; 
    margin: 20px; 
} 

#header:after { 
    content: ''; 
    position: absolute; 
    top: -15px; 
    left: -15px; 
    right: -15px; 
    bottom: -15px; 
    background: #600202; 
    z-index: -1; 
} 

#header h1 { 
    font-family: Arial; 
    color: white; 
    text-align: center; 
} 



#navbar { 
    padding-left: 8px; 
    margin:5px; 
} 

#navbar ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 15%; 
    background-color: #f1f1f1; 
    position: fixed; 
    overflow: auto; 
    border: 5px solid black; 
    border-radius: 3%; 
    font-family: Arial; 
    font-weight: bold; 
} 

#navbar li a { 
    display: block; 
    color: #000; 
    padding: 8px 16px; 
    text-decoration: none; 
} 

#navbar li a:hover { 
    background-color: #555; 
    color: white; 
} 

#navbar li a.active { 
    background-color: #600202; 
    color: white; 
} 


#navbar li { 
    text-align: center; 
    border-bottom: 5px solid black; 
} 

#navbar li:last-child { 
    border-bottom: none; 
} 

#text { 
    border:1px solid black; 

}

출처

2016-10-29 Marino Bjelopera

여기서는 'position : absolute;'를 사용하지 말아야합니다. 여기서는 float 또는 display가 훨씬 더 효율적일 수 있습니다. –

그러나 그 위치 : 절대; 헤더 div에 대한 것이므로 그 아래 내용과 관련이 없어야합니다. 아니면 내가 틀렸어 –

네가 맞아, 내가 너무 빨리 보았다. 박스 섀도우도 사용하고이 절대적인 의사를 버려도된다. (나는 단지 내가 당신의 CSS의 일부분을 놓친 것을 발견했다.) –

이미 Javier에서 언급했듯이 position:fixed과 float:left의 혼합으로 인해 문제가 발생하지만 문서 흐름에서 요소가 제거 되었기 때문에 너비가 올바르게 계산되지 않습니다.

우리가 처음 돌볼 필요가있는 코드 몇 가지 문제가 있습니다

1.)을 position:fixed는 #navbar ul의 일부이지만, 경우에 스크롤 것은, 네비게이션 바의 용기는 텍스트와 함께 스크롤 것 고정 탐색이 부모 컨테이너와 함께 스크롤됩니다.

2) 폭은 ul 요소에 정의되어 있습니다 (요소가 적절한 길이로 늘어나지 못하게 함). 요소 자체는 고정되어 있으므로 부모 요소 자체가 너비를 갖지 않습니다 (요소가 #text 소자가 #navbar 요소 아래에 위치되는 이유 float:left

한 용액을 ... 사용시) 주위 문서 플로우의 일부로 렌더링 그건

...에 position: fixed 이동할 수도 #navbar 요소 n은 #text 요소에 대한 고정 왼쪽 여백을 정의

#text { 
    margin-left: 240px; 
    border: 1px solid black; 
} 

#navbar { 
    padding-left: 8px; 
    margin: 5px; 
    width: 220px; 
    position: fixed; 
} 

#navbar ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    background-color: #f1f1f1; 
    border: 5px solid black; 
    border-radius: 3%; 
    font-family: Arial; 
    font-weight: bold; 
}

나는 완전한 변화 here를 포함하는 바이올린을 만들었습니다.

출처

2016-10-29 11:59:48 SaschaM78

고마워요 선생님 :) –

#navbar { 
    padding-left: 8px; 
    margin:5px; 
    float: left; 
} 

#navbar ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    /*width: 15%;*/ 
    background-color: #f1f1f1; 
    /*position: fixed;*/ 
    overflow: auto; 
    border: 5px solid black; 
    border-radius: 3%; 
    font-family: Arial; 
    font-weight: bold; 
} 

#text { 
    border:1px solid black; 
    float: left; 
}

출처

2016-10-29 11:36:53

텍스트 div가 탐색 바 아래에 표시됩니다. –

'#navbar ul'규칙이 너비 '15 %'로 '고정'위치로 설정됩니다. 그 (나는 대답을 업데이 트) 제거하십시오. –

도움을 청하려고했습니다 –

내가 하비에르 레이가 쓴 코드이 시도, 그것은 정확하게 당신이 원하는 방식으로 일 . 여백과 안쪽 여백 때문에 nav 및 div와 관련된 스타일을 일시적으로 제거해보십시오.

출처

2016-10-29 11:50:14

두 div가 서로 옆에 있도록하려면 어떻게해야합니까?

답변

관련 문제