Question

＆＃13;

if(map.get("DynamicVariableName")!=null){
    map.put("DynamicVariableName"+autogeneratedNumberSuffix,ValueToBeStored)
}
else{
map.put("DynamicVariableName",ValueToBeStored)
}

＆＃13;

.frame {
    width: 1000px;
    position: relative;
}

.left {
    float: left;
}

.right {
    float: right;
}

.pre-left,
.pre-right {
    height: 102px;
    width: 88px;
}

.pre-left {
    background-image: url('https://i.stack.imgur.com/BZJJC.png');
}

.pre-right {
    background-image: url('https://i.stack.imgur.com/F2OlY.png');
    margin-right: -88px;
    margin-top: -30px;
}

.pre-mid {
    background-image: url('https://i.stack.imgur.com/KD1SO.png');
    width: auto;
    display: block;
    height: 30px;
    margin-left: 88px;
}

.after-left,
.after-right {
    height: 53px;
    width: 79px;
}

.after-left {
    background-image: url('https://i.stack.imgur.com/wml1g.png');
    margin: 19px 0px -40px -65px;
}

.after-right {
    background-image: url('https://i.stack.imgur.com/gDDhD.png');
    margin: -34px -65px -40px 0;
}

.after-mid {
    background-image: url('https://i.stack.imgur.com/Jh00z.png');
    width: auto;
    display: block;
    height: 53px;
    margin: 19px 0px -19px 14px;
}

.group:before,
.group:after {
    content: "";
    display: table;
}

.group:after {
    clear: both;
}

.group {
    zoom: 1;
    /* For IE 6/7 (trigger hasLayout) */
    z-index: 100;
}

.content {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);
    width: calc(100% - 42px);
    margin: 24px 0 24px 13px;
    padding: 30px 35px 0 35px;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-image: url("https://i.stack.imgur.com/NXc4d.png") 0% 50%;
    background-image: url("https://i.stack.imgur.com/QczND.jpg");
    background-size: cover;
    color: #fff;
    z-index: -1;
}

＆＃13;

我在修复此页面时遇到了一些问题。

http://haxholm.me/test2.html

我终于看到了我想要的一切，但由于某种原因我无法清除这个元素！我不知道出了什么问题，我已经尝试过寻找各种不同的解决方案 - 在我的情况下都没有。

那么我的问题是什么？我需要另外一套眼睛来解决这个问题。

Answer 1

CSS - 清除div
时Clearfix无法正常工作

您好，

一些小的更改和您的代码将完美运行。

<!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
      <style>
        .frame {
width:1000px;
position:relative;
}

.left {
float:left;
}

.right {
float:right;
}

.pre-left, .pre-right {
height:102px;
width:88px;
}

.pre-left {
background-image:url('images/frames_01.png');
}

.pre-right {
background-image:url('images/frames_04.png');
margin-right:-88px;
margin-top: -30px;
}

.pre-mid {
background-image:url('images/frames_02.png');
width:auto;
display:block;
height:30px;
margin-left: 88px;
}

.after-left, .after-right {
height:53px;
width:79px;
}

.after-left {
background-image:url('images/frames_10.png');
margin: 19px 0px -40px -65px;
}

.after-right {
background-image:url('images/frames_13.png');
margin:-34px -65px -40px 0;
}

.after-mid {
background-image:url('images/frames_11.png');
width:auto;
display:block;
height:53px;
margin:19px 0px -19px 14px;
}

.group:before,
.group:after {
  content: "";
  display: table;
} 
.group:after {
  clear: both;
}
.group {
  zoom: 1; /* For IE 6/7 (trigger hasLayout) */
  z-index:100;
}

.content {
position:absolute;
background-color:rgba(0,0,0,0.3);
width: calc(100% - 42px);
    margin: 24px 0 24px 13px;
    padding: 30px 35px 0 35px;
    border-left:17px solid transparent;
    border-right:17px solid transparent;
    border-image: url("images/frames_06.png") 0% 50%;
    background-image:url("images/framebg.jpg");
    background-size:cover;
    color:#fff;
z-index:-1;
}
         .group.frame {
            position:relative;
         }
         .group.frame .content + .group {
            position: absolute;
            top: 0px;
            left: 0;
            right: 0px;
         }
      </style>
   </head>
   <body data-gr-c-s-loaded="true" cz-shortcut-listen="true">
      <div class="group frame">
         <div class="content">
            <p> du er boos </p>
            <p> du er boos </p>
            <p> du er boos </p>
            <p> du er boos </p>
            <div class="group after-group">
               <span class="left after-left"></span>
               <span class="after-mid"></span>
               <span class="right after-right"></span>
            </div>
         </div>
         <div class="group">
            <span class="left pre-left"></span>
            <span class="pre-mid"></span>
            <span class="right pre-right"></span>
         </div>
      </div>
      clearfix
   </body>
</html>

Answer 2

这是因为你的元素.content的位置是绝对的 - 这意味着父容器（.group）不知道它的高度。

所以它的行为完全符合预期 - 我建议将.content相对，并将保持顶部边框的元素设为绝对位置。

CSS - Clearfix在清除div时不起作用

2 个答案: