Question

我创建了这个页面，我有一些按钮，如果我将它们悬停在它们上面，我的中心文本字段的内容将会改变。问题是，在我的中心字段的左侧和右侧，我还有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位置。

我希望这会有所帮助。

#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;
}

注意：我建议您使用min-height，因为如果您的内容在任何时间点都超出了高度，那么它可能看起来不错，因为height可能会限制布局。

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

ps：我不推荐在未经他们许可的情况下剥离雅虎的网站。 ;)

Answer 3

由于文本的长度发生变化（线条数量发生变化），内容div的高度也会发生变化，导致之后的所有元素都向下移动。

一个简单的解决方法是让你的.centermenu课程有一些固定的高度。

如果没有，您可以考虑将div position: absolute放在Handler

上

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

3 个答案: