2つのdivを互いに隣り合わせにするにはどうすればよいですか？

画面の左側でnavbarを作成し、navbarのすぐ隣からテキストdivを作成する必要があります。私は、テキストdivを画面の右側にずっと進めるように管理しました。は、これまでのところ、私はこれがあります。2つの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;'を使うべきではありません。浮動小数点や表示ははるかに効率的です。 –

しかしその位置：絶対;ヘッダーdivのためのもので、その下のコンテンツとは関係がありません。それとも、私は間違っています –

あなたは正しいです、私はあまりにも速い外観を持っていた、あなたはまた、ボックスシャドウを使用して、この絶対的な擬似をドロップすることができます:)（私はあなたのCSSの部分も見逃して気づいただけで私の悪いconnexion） –

すでに述べたように、問題は、position:fixedとfloat:leftが混在しているため、要素がドキュメントフローから削除されたため、正しく計算されません。

我々は最初の世話をするために必要なコードといくつかの問題があります。

1.）position:fixedが#navbar ulの一部ですが、あなたがスクロールして見えなくなってしまう場合には、ナビゲーションバーのコンテナは、テキストと一緒にスクロールします固定ナビゲーションが親コンテナと一緒にスクロールします。要素がないように、親要素（幅自体を持っていない理由

2）の幅（）はそれらの適切な長さに延伸するエレメントを防止ul要素で定義されているが、素子自体が固定配置され、それがですfloat:left

一つの解決策を使用した場合、周囲のドキュメントフローの一部としてレンダリングされた）、それは#text要素が#navbar要素の下に配置されている理由...

...に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％'で 'fixed'の位置に設定されています。それらを削除する（私は答えを更新した）。 –

私は助けようとしていました –

を私はハビエル・レイが書いたコードでこれを試みたが、それは正確にあなたが望むように働いていました。マージンとパディングのために、navとdivに関連するスタイルを一時的に削除してみてください。

出典

2016-10-29 11:50:14

2つのdivを互いに隣り合わせにするにはどうすればよいですか？

答えて

関連する問題