html - 悬停时，我的一些元素会移动

Question

我制作了这个页面，其中有一些按钮，如果我将鼠标悬停在它们上面，我的中心文本字段的内容将会改变。问题是，在中心字段的左侧和右侧，我还有 2 个文本字段，但它们的内容必须保持不变，但出于某种原因，当我将鼠标悬停在按钮上时，这 2 个 div 会改变它们的位置。知道为什么吗？另外，为什么这两个 div 中的文本如此不对称？

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 我为此稍微更改了 css。 .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;
}