Question

我正在建立一个网站，并遇到了一个使用slideToggle的问题。我正在使用它，在一个问题下显示一些标签，这不是必须一直显示的。但是具有此slideToggle的div是垂直列表的顶部div，并且当我将其切换出来时，它不会在下方对页面底部进一步使用div。我试图清除div以防止任何阻碍slideToggle正常工作方式的东西，但它仍然重叠。

CSS：

.LayoutBlockContainer {
  position:absolute;
  top:80px;
  height:auto;
  width:800px;
  left:220px;
}

.Answerblock {
  background-color:white;
  border-radius:1px;
  min-height: 200px;
  height:auto;
  width: 800px;
  /*left: 220px;*/
  display:block;
  /*padding: 20px;*/
  /*top: -1000px;*/
  position: relative;
  margin-bottom:20px;
  border-color: #D0D1D5;
  border-bottom:10px;
  display:table;
  padding-bottom:5px; 
}

.ab1 {
  width:800px;
  height:auto;
  background-color:white;
  position:relative;
  padding-bottom:22px;
  position:relative;
  top:0px; 
}

.CommentContent {
  font-family:Arial;
  word-break:normal;
  display:inline-block;
  width: 695px;
  height:auto;
  min-height: 100px;
  position:relative;
  left: 65px;
  white-space:normal; 
}

.Titletext {
  font-family:Arial;
  word-break:normal;
  display:inline-block;
  width: 695px;
  height:auto;
  min-height: 20px;
  position:relative;
  left: 65px;
  white-space:normal;
  font-weight:bold;
  font-size:1.2em;
  padding-bottom:10px;
  padding-top:10px; 
}

.CommentFooter { 
  clear: both;
  position: relative;
  height: 80px;
  width:100%;
  bottom: -20px;
  padding-bottom:5px; 
}

.expand {
  width:800px;
  background-color:white;
  left:0px;
  position:absolute;
  display:block;
  top: 50px;
  text-align:center;
  z-index:3;
  margin-bottom:100px; 
}

.expand div {
  max-width:300px; 
}

.expand .moretagcontent {
  display: none;
  padding : 5px;
  width:270px;
  max-height:200px;
  background-color:white;
  left: 260px;
  position:relative;
  bottom: 29px;
  z-index:3;
  height:auto; 
}

.showmore {
  padding: 2px;
  cursor: pointer;
  font-weight: bold;
  font-family: Arial;
  text-align: center;
  bottom: 00px;
  margin: 0 auto;
  position:relative;
  left:380px; 
}

.showmore {
  position:absolute;
  float:left;
  display:inline-block; 
}

.expand .moretagcontent {
  display: none;
  padding : 5px;
  width:270px;
  max-height:200px;
  background-color:white;
  left: 260px;
  position:relative;
  bottom: 29px;
  z-index:3;
  height:auto; 
}

.moretagcontent {
  color:black;
  font-family:Arial;
  font-size:0.8em;
  width: 240px;
  word-wrap: break-word; 
}

body {
  background-color:lightgrey; 
}

HTML：

        <div class="LayoutBlockContainer">
         <div class="Answerblock">
            <span class="Titletext"> Halp! Not working! </span>
            <div class="CommentContent"> comment content here </div>
            <div class="CommentFooter">
                <div class="expand">
                    <div class="moretagcontent">
                        #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag#tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag#tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag
                    </div>
                    <div class="showmore">
                        <span>More</span>
                    </div>

                </div>
            </div>
        </div>

            <div class="ab1">

                <div class="CommentContent">
                   asdasdasdasdasdasdasdasdasd
                </div>
                <div class="CommentFooter">                
                </div>
            </div>

    </div>

这是the demo

谢谢！

Answer 1

因为.expand是position: absolute导致它从文档流中删除，因此不会记录高度/宽度。删除：

.expand {
  width:800px;
  background-color:white;
  /*position:absolute;*/ //remove
  display:block;
  text-align:center;
  margin-bottom:100px; 
}

定位元素可能非常混乱。您应该尝试使用边距，填充，浮动，内联块等来执行此操作，而不是仅仅向左，向右，向上和向下移动。从长远来看，它会对你有所帮助。

FIDDLE

slideToggle没有将div推到下面，只是重叠

1 个答案: