ホバー上で、私の要素の一部が移動する

Question

私はいくつかのボタンがある場所を作りました。私がそれらの上に乗ると、私の中央のテキストフィールドの内容が変わります。問題は、私のセンターフィールドの左側と右側に2つのテキストフィールドがありますが、その内容は変わりませんが、何らかの理由でボタンの上にマウスを置くと、2つのdivの位置が変わります。どんな考え？また、なぜ2つの部門でテキストが非対称であるのですか？

HTML：

<div class="centru"> 
    <div class="tohover" id="m1"><a href=#>Home</a></div> 
    <div class="tohover" id="m2"><a href=#>Mail</a></div> 
    <div class="tohover" id="m3"><a href=#>Sports</a></div> 
    <div class="tohover" id="m4"><a href=#>Movies</a></div> 
    <div class="centermenu" id="c1"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel molestie nulla, eu tincidunt purus. Phasellus eget ligula orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> 
    </div> 
    <div class="centermenu" id="c2"> 
     <p>Phasellus mattis rutrum urna et imperdiet. Ut laoreet feugiat magna non consequat. Cras dictum auctor felis, et aliquam ante vehicula quis. Vivamus quis turpis lectus. Nulla lobortis sem ac purus lacinia finibus. </p> 
    </div> 
    <div class="centermenu" id="c3"> 
     <p>Curabitur quis ex mollis, sollicitudin nunc ut, sollicitudin enim. Vestibulum ligula sem, finibus ac enim a, imperdiet efficitur mi.</p> 
    </div> 
    <div class="centermenu" id="c4"> 
     <p>Nam laoreet augue id risus pretium efficitur. Suspendisse consequat elementum urna sit amet porta. Proin feugiat suscipit ante, varius sodales dolor vestibulum ac.</p> 
    </div> 
    <div class="online"> 
     <p>sdfsfdfsd</pp> 
    </div> 
    <div class="rightonline"> 
     <p>sdfsfdfsd</pp> 
    </div> 

CSS：

.centru { 
    position: relative; 
    height: 700px; 
    width: 1500px; 
    overflow: hidden; 
    margin-top: 100px; 
    margin-left: 150px; 
} 

.tohover { 
    margin-top: 50px; 
    margin-left: 73px; 
    text-decoration: none; 
    list-style-type: none; 
    display: inline; 
    background-color: #330066; 
    padding-left: 80px; 
    padding-right: 80px 
} 

.centermenu { 
    background-color: #F9F9F9; 
    position: relative; 
    float: left; 
    width: 700px; 
    margin-top: 70px; 
    margin-left: 260px; 
    border: 1px solid #606060; 
    height: auto; 
    color: black; 
    word-wrap: break-word; 
} 

p { 
    padding: 5px; 
    text-indent: 10px; 
} 

.tohover > a { 
    color: white; 
} 

#c1.centermenu { 
display: block; 
} 

#c2.centermenu { 
display: none; 
} 

#c3.centermenu { 
display: none; 
} 

#c4.centermenu { 
display: none; 
} 

#m1:hover ~ #c1 { 
    display: block; 
} 

#m2:hover ~ #c2 { 
    display: block; 
} 

#m2:hover ~ #c1 { 
    display: none; 
} 

#m3:hover ~ #c3 { 
    display: block; 
} 

#m3:hover ~ #c1 { 
    display: none; 
} 

#m4:hover ~ #c4 { 
    display: block; 
} 

#m4:hover ~ #c1 { 
    display: none; 
} 

.online { 
    width: 200px; 
    height: auto; 
    background-color: red; 
    margin-top: 70px; 
    background-color: #F9F9F9; 
    border: 1px solid #606060; 
    height: auto; 
    color: black; 
    word-wrap: break-word; 
    font-size: 25px; 
} 

.rightonline { 
    width: 200px; 
    height: auto; 
    background-color: red; 
    margin-top: -160px; 
    background-color: #F9F9F9; 
    border: 1px solid #606060; 
    height: auto; 
    color: black; 
    word-wrap: break-word; 
    font-size: 25px; 
    margin-left: 1017px; 
} 

私が投稿してどのようなコードはよく分かりません。それは長くない、ここにスニペットですhttp://codepen.io/LisaFort/pen/bpraJq

私は唯一のhtmlとCSS、いいえjsを使用！基本的に私はこれらの3つのdivをインラインで整理する方法を知らなかったので、私はちょうどマージンで遊んだ。どのように私はそれらを相互に影響を与えないようにインラインで置くことができますか？

テキストが最小高さよりも大きくなると、提案された最小高さを追加しても問題は解決されませんが、他のdivはまだ移動します。

Answer 1

HEJであなたの下div Sの位置決めを考えるかもしれないenoughtない場合。 .rightonlineの内側に残っている余白は、段落が下に移動するようにします。このCSSコードでは、divの位置をオンラインrightonlineとcentermenuだけ変更する必要があります。

こちらがお役に立てば幸いです。

#main { 
    background-color: #330066; 
    color: white; 
    height: 20px; 
} 

#mainlist { 
    display: inline; 
    padding: 20px; 
    font-size: 17px; 
    font-family: Arial; 
} 

a { 
    color: white; 
    text-decoration: none; 
} 

#mainlist:hover { 
    text-decoration: underline; 
} 

#centerer { 
    positiong: absolute; 
    margin-left: 300px; 
} 

#image { 
    height: 45px; 
    padding: 10px; 
    margin-top: 20px; 
    margin-bottom: -30px; 
    position: relative; 
} 

.textbox { 
    background: transparent url(http://html-generator.weebly.com/files/theme/input-text-8.png) repeat-x; 
    border: 1px solid #999; 
    outline:0; 
    height: 30px; 
    width: 500px; 
    } 

.button { 
    background-color: #0080F0; /* Green */ 
    border: none; 
    color: white; 
    height: 40px; 
    width: 140px; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px; 
    margin-bottom: -16px; 
    border-radius: 4px; 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); 
} 

#texter { 
    display: table-cell; 
    position: relative; 
    padding-top: 10px; 
    padding-left: 12px; 
} 

.centru { 
    position: relative; 
    height: 700px; 
    width: 1500px; 
    overflow: hidden; 
    margin-top: 100px; 
    margin-left: 150px; 
} 

.tohover { 
    margin-top: 50px; 
    margin-left: 73px; 
    text-decoration: none; 
    list-style-type: none; 
    display: inline; 
    background-color: #330066; 
    padding-left: 80px; 
    padding-right: 80px 
} 

p { 
    padding: 5px; 
    text-indent: 10px; 
} 

.tohover > a { 
    color: white; 
} 

#c1.centermenu { 
display: block; 
} 

#c2.centermenu { 
display: none; 
} 

#c3.centermenu { 
display: none; 
} 

#c4.centermenu { 
display: none; 
} 

#m1:hover ~ #c1 { 
    display: block; 
} 

#m2:hover ~ #c2 { 
    display: block; 
} 

#m2:hover ~ #c1 { 
    display: none; 
} 

#m3:hover ~ #c3 { 
    display: block; 
} 

#m3:hover ~ #c1 { 
    display: none; 
} 

#m4:hover ~ #c4 { 
    display: block; 
} 

#m4:hover ~ #c1 { 
    display: none; 
} 

.centermenu { 
    background-color: #F9F9F9; 
    float: left; 
    position: relative; 
    width: 700px; 
    border: 1px solid #606060; 
    height: auto; 
    color: black; 
    word-wrap: break-word; 
} 

.online { 
    width: 200px; 
    height: auto; 
    background-color: red; 
    background-color: #F9F9F9; 
    border: 1px solid #606060; 
    color: black; 
    word-wrap: break-word; 
    font-size: 25px; 
    postion: relative; 
    float: left; 
} 

.rightonline { 
    width: 200px; 
    height: auto; 
    background-color: red; 
    background-color: #F9F9F9; 
    border: 1px solid #606060; 
    height: auto; 
    color: black; 
    word-wrap: break-word; 
    font-size: 25px; 
    position: relative; 
    float: left; 
} 

Answer 2

要素.centermenuは固定高さがなく、内容に基づいて高さを使用しているためです。だから、min-heightの100pxにしてください。

.centermenu { 
    min-height: 100px; 
} 

注：私は時間の任意の時点で、あなたの内容は、高さを超えた場合、それが良い見えるかもしれません、ので、レイアウトが制限される場合がありますheightとして、min-heightを使用してお勧めします。

CodePen：http://codepen.io/anon/pen/YqxYmP

PS：私は彼らの許可なしにヤフーのウェブサイトを剥離することはお勧めしません。テキストの変更（及び線変更量）の長さは;)

Answer 3

コンテンツのDIVの高さは、下に移動し、その後のすべての要素を引き起こし、同様に変化します。

簡単な修正は、.centermenuクラスに固定高さを与えることです。

それはあなたが私は少しこのCSSを変更しposition: absolute