首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >张贴面积未扩大

张贴面积未扩大
EN

Stack Overflow用户
提问于 2022-08-18 21:45:35
回答 1查看 29关注 0票数 0

我正在编码一个区域,这是为了张贴在论坛上,因此应该扩大与内容,因为它越来越长。我用一分钟的高度对它进行编码,并认为随着它的扩展,它会和其他的一样移动。不幸的是,张贴区域本身扩展了,但是下面的区域/页脚并没有向下移动。他们牢牢地呆在原地。

我搜索了所有的地方,看到了浮标和清除的地方,所以我不确定这是否是我需要做的。我尝试过一些清除方法,但它们要么出现故障,要么根本无法工作。我还尝试在所有带浮动的部分中添加“溢出:隐藏”,但这没有任何作用。我现在也不熟悉用柔性盒进行编码,所以这对我来说不是一个合适的解决方案。

我认为对此有一些新的看法是非常有帮助的。请帮我看看哪里出了问题。

不幸的是,我没有这一个的代码链接,因为我改变了它的原始模式,当我把它放在我的网站上。不过,我可以链接到显示问题的线程:https://lovedive.jcink.net/index.php?showtopic=5&st=0&#entry20

这是完整的代码和css。很久了,希望这不是痛苦。

代码语言:javascript
复制
.posting {
  width: 1100px;
  min-height: 1380px;
  background-color: #f7f7f7;
  border-radius: 15px 15px 10px 10px;
  border: 1px solid #eee;
  position: relative;
  z-index: 0;
  margin-bottom: 20px;
}

.proftop {
  width: 1100px;
  height: 150px;
  padding: 0px;
  background-image: linear-gradient( to bottom right, rgba(202, 186, 202, 0.2), rgba(123, 83, 123, 0.7));
  /****CHANGE FOR GROUP****/
  border-radius: 15px 15px 0px 0px;
  overflow: hidden;
}

.proftopname {
  width: 800px;
  padding: 15px;
  font-family: abril fatface;
  font-size: 45px;
  text-align: center;
  color: #ffffff;
  text-transform: lowercase;
  text-shadow: 1px -1px 0px rgba(0, 0, 0, 0.2), -1px 1px 0px rgba(0, 0, 0, 0.2), 1px 1px 0px rgba(0, 0, 0, 0.2), -1px -1px 0px rgba(0, 0, 0, 0.2);
  letter-spacing: 2px;
  position: absolute;
  left: 0px;
  top: 30px;
}

.proftopname a {
  color: #ffffff;
}

.proftoppic {
  position: absolute;
  top: 0px;
  right: 0px;
}

.proftoppic img {
  object-fit: cover;
  object-position: center;
  height: 150px;
  width: 250px;
  border-radius: 100px 20px 0px 100px;
}


/*** CHARACTER INFO BENEATH TOP BAR ***/

.picandlinks {
  height: 10px;
  width: 10px;
  display: inline-block;
  position: absolute;
  left: 0px;
}

.profroundpic {
  height: 100px;
  width: 100px;
  background-color: #f7f7f7;
  padding: 15px;
  border: 1px solid rgba(123, 83, 123, 0.5);
  /****CHANGE FOR GROUP****/
  border-radius: 100px;
  margin: 40px;
  display: inline-block;
  position: absolute;
  top: -20px;
  left: 0px;
  z-index: 10;
}

.profroundpic img {
  object-fit: cover;
  object-position: center;
  height: 100px;
  width: 100px;
  border-radius: 100px;
}

.topicsposts {
  width: 80px;
  height: 100px;
  padding: 10px 10px 0px;
  margin: 1px;
  background-color: transparent;
  display: inline-block;
  position: absolute;
  left: 140px;
  top: 32px;
  z-index: 11;
}

.topicsposts g {
  height: 15px;
  width: 15px;
  padding: 8px 10px 10px 10px;
  border-radius: 100px;
  background-color: rgba(202, 186, 202, 1);
  /****CHANGE FOR GROUP****/
  font-size: 15px;
  color: #fff;
  position: absolute;
  display: inline-block;
  left: 35px;
  top: -10px;
}

.topicsposts h {
  height: 15px;
  width: 15px;
  padding: 8px 10px 10px 10px;
  border-radius: 100px;
  background-color: rgba(202, 186, 202, 1);
  /****CHANGE FOR GROUP****/
  font-size: 15px;
  color: #fff;
  position: relative;
  display: inline-block;
  left: 35px;
  top: 25px;
}

.topicsposts j {
  height: 15px;
  width: 15px;
  padding: 8px 10px 10px 10px;
  border-radius: 100px;
  background-color: rgba(202, 186, 202, 1);
  /****CHANGE FOR GROUP****/
  font-size: 15px;
  color: #fff;
  position: relative;
  display: inline-block;
  top: 68px;
  left: -15px;
}

.topicsposts g:hover {
  background-color: rgba(163, 135, 163, 1);
  /****CHANGE FOR GROUP****/
  transition: ease-in 0.3s;
  cursor: crosshair;
}

.topicsposts h:hover {
  background-color: rgba(163, 135, 163, 1);
  /****CHANGE FOR GROUP****/
  transition: ease-in 0.3s;
  cursor: crosshair;
}

.topicsposts j:hover {
  background-color: rgba(163, 135, 163, 1);
  /****CHANGE FOR GROUP****/
  transition: ease-in 0.3s;
  cursor: crosshair;
}

.topicsposts a {
  font-size: 15px;
  color: #fff;
  text-decoration: none;
}

.hiddenbubbleone {
  height: 170px;
  width: 200px;
  border-radius: 150px;
  background-color: #f7f7f7;
  position: absolute;
  z-index: 9;
  top: 150px;
  left: 10px;
}

.charinfo {
  width: 870px;
  height: 100px;
  border-radius: 2px;
  background-color: #eee;
  padding: 20px;
  margin: 15px;
  position: absolute;
  right: 0px;
  font-family: poppins;
  display: block;
}

.charinfo f {
  font-size: 25px;
  height: 25px;
  color: rgba(247, 247, 247, 1);
  letter-spacing: 1px;
  padding: 5px 20px 0px 20px;
  margin-top: 30px;
  font-family: staatliches;
  letter-spacing: 4px;
  display: block;
  text-shadow: 1px -1px 0px rgba(125, 131, 137, 0.5), -1px 1px 0px rgba(125, 131, 137, 0.5), 1px 1px 0px rgba(125, 131, 137, 0.5), -1px -1px 0px rgba(125, 131, 137, 0.5);
}

.charinfo k {
  padding: 5px 15px;
  margin: 5px;
  border-radius: 5px;
  height: 10px;
  font-size: 10px;
  color: #888888;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 1px -1px 0px rgba(255, 255, 255, 0.2), -1px 1px 0px rgba(255, 255, 255, 0.2), 1px 1px 0px rgba(255, 255, 255, 0.2), -1px -1px 0px rgba(255, 255, 255, 0.2);
}


/******** POSTING AREA *********/

.postarea {
  min-height: 600px;
  width: 720px;
  padding: 30px;
  font-family: poppins;
  font-size: 12px;
  color: #888;
  letter-spacing: 1px;
  text-align: left;
  background-color: rgba(255, 255, 255, 0.6);
  border-top: 40px solid #eee;
  border-left: 1px solid #eee;
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
  border-radius: 5px;
  position: absolute;
  display: inline-block;
  top: 320px;
  left: 20px;
}

.postdatetime {
  width: 300px;
  font-family: montserrat;
  font-size: 10px;
  letter-spacing: 2px;
  text-align: left;
  text-transform: uppercase;
  color: #666;
  position: absolute;
  top: 335px;
  left: 40px;
  z-index: 10;
}

.postdatetime a {
  text-decoration: none;
  color: rgba(123, 83, 123, 1);
  /****CHANGE FOR GROUP****/
  cursor: crosshair;
}

.posteditbuttons {
  width: 250px;
  font-family: montserrat;
  font-size: 10px;
  letter-spacing: 1px;
  text-align: right;
  text-transform: uppercase;
  color: #666;
  position: absolute;
  top: 335px;
  right: 320px;
  z-index: 10;
}

.posteditbuttons a {
  text-decoration: none;
  color: rgba(123, 83, 123, 1);
  /****CHANGE FOR GROUP****/
  cursor: crosshair;
  margin-left: 10px;
  display: inline-block;
}


/******** MINI PROFILE ********/

.miniholder {
  height: 400px;
  width: 230px;
  padding: 25px 15px;
  border-radius: 5px;
  border: 1px solid #eee;
  background-image: linear-gradient( to bottom, rgba(202, 186, 202, 0.4), rgba(123, 83, 123, 0.3));
  /****CHANGE FOR GROUP****/
  position: absolute;
  display: inline-block;
  top: 320px;
  right: 20px;
}

.miniarea {
  height: 400px;
  width: 230px;
  background-color: #fff;
}


/*****BOTTOM INFO******/

.bottomcontainer {
  width: 1100px;
  height: 550px;
  border-radius: 0px 0px 10px 10px;
  background-image: linear-gradient( rgba(255, 255, 255, 0.2), rgba(202, 186, 202, 0.5));
  /****CHANGE FOR GROUP****/
  position: absolute;
  z-index: 0;
  bottom: 0px;
}


/******** SHIP STATUS *******/

.shipinfo {
  width: 450px;
  height: 180px;
  padding: 10px;
  border-radius: 15px 2px 2px 15px;
  border: 1px solid #ddd;
  background-color: rgba(255, 255, 255, 0.7);
  position: relative;
  top: 205px;
  display: inline-block;
}

.shipinfo1 {
  height: 160px;
  background-color: #fff;
  border: 1px dashed #eee;
  padding: 10px;
  border-radius: 15px 2px 2px 15px;
}

.shipstatus {
  width: 220px;
  height: 100px;
  position: absolute;
  top: 50px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.shipstatus d {
  display: block;
  height: 20px;
  margin-top: 25px;
  font-family: poppins;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  color: #aaa;
}

.shipstatus a {
  display: block;
  height: 20px;
  margin-top: 5px;
  font-family: staatliches;
  font-size: 20px;
  letter-spacing: 1px;
  color: rgba(123, 83, 123, 0.6);
  /****CHANGE FOR GROUP****/
  text-decoration: none;
  cursor: crosshair;
}

.partnergif {
  width: 180px;
  height: 120px;
  background-color: #fff;
  position: absolute;
  display: inline-block;
  right: 40px;
  top: 35px;
  z-index: 1;
}

.partnergif img {
  object-fit: cover;
  object-position: center;
  width: 180px;
  height: 120px;
  border: 5px solid #fff;
  border-radius: 2px;
  box-shadow: 1px 1px 0px #ddd, -1px -1px 0px #ddd;
}

.shipgrad {
  height: 160px;
  width: 50px;
  background-image: linear-gradient( rgba(202, 186, 202, 0.2), rgba(123, 83, 123, 0.3));
  /****CHANGE FOR GROUP****/
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 0;
}


/****** TRIGGERS ******/

.triggersinfo {
  width: 450px;
  height: 180px;
  padding: 10px;
  border-radius: 2px 15px 15px 2px;
  border: 1px solid #ddd;
  background-color: rgba(255, 255, 255, 0.7);
  position: relative;
  top: 205px;
  display: inline-block;
}

.triggersinfo1 {
  height: 160px;
  background-color: #fff;
  border: 1px dashed #eee;
  padding: 10px;
  border-radius: 2px 15px 15px 2px;
}

.triggersgrad {
  height: 160px;
  width: 50px;
  background-image: linear-gradient( rgba(202, 186, 202, 0.2), rgba(123, 83, 123, 0.3));
  /****CHANGE FOR GROUP****/
  position: absolute;
}

.triggersicon {
  height: 30px;
  width: 30px;
  padding: 12px 15px 16px 15px;
  border-radius: 2px;
  background-color: #fff;
  border: 1px solid #eee;
  color: #aaa;
  font-size: 30px;
  position: absolute;
  top: 70px;
  left: 35px;
}

.trigiconpulse {
  height: 30px;
  width: 30px;
  border-radius: 50px;
  position: absolute;
  top: 15px;
  background-color: transparent;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
  transform: scale(1);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

.triggersheader {
  width: 300px;
  height: 30px;
  padding-bottom: 30px;
  font-size: 30px;
  font-family: staatliches;
  text-transform: uppercase;
  color: #aaa;
  letter-spacing: 2px;
  position: absolute;
  left: 130px;
  border-bottom: 1px dashed #ddd;
}

.triggersheader w {
  font-family: montserrat;
  font-size: 10px;
  letter-spacing: 1px;
  display: block;
  border-top: 1px dashed #ddd;
  padding: 5px;
}

.triggersheader ion-icon {
  position: relative;
  top: 2px;
  font-size: 11px;
}

.triggersbox {
  height: 70px;
  width: 300px;
  padding: 10px 15px;
  background-color: #f7f7f7;
  overflow: auto;
  font-family: poppins;
  color: #aaa;
  font-size: 11px;
  text-align: justify;
  position: absolute;
  top: 90px;
  left: 115px;
}


/*** OTHER LINKS ***/

.otherlinks {
  height: 90px;
  width: 1030px;
  padding: 10px 20px 20px 20px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 15px;
  border: 1px solid #ddd;
  display: block;
  position: relative;
  top: 210px;
}

.otherlinksleft {
  height: 60px;
  width: 400px;
  padding-top: 20px;
  display: inline-block;
  float: left;
  overflow: hidden;
}

.otherlinks g {
  height: 20px;
  width: 20px;
  padding: 15px 20px;
  border-radius: 8px;
  background-color: rgba(202, 186, 202, 0.4);
  /***CHANGE TO GROUP COLOR***/
  margin: 5px;
  box-shadow: 1px -1px 0px rgba(255, 255, 255, 1), -1px 1px 0px rgba(255, 255, 255, 1), 1px 1px 0px rgba(255, 255, 255, 1), -1px -1px 0px rgba(255, 255, 255, 1);
  display: inline-block;
}

.otherlinks g:hover {
  background-image: linear-gradient( rgba(222, 212, 222, 0.2), rgba(163, 135, 163, 0.3));
  /***CHANGE TO GROUP COLOR***/
}

.otherlinks a {
  font-size: 20px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px -1px 0px rgba(163, 135, 163, 0.5), -1px 1px 0px rgba(163, 135, 163, 0.5), 1px 1px 0px rgba(163, 135, 163, 0.5), -1px -1px 0px rgba(163, 135, 163, 0.5);
}

.otherlinksright {
  height: 100px;
  width: 620px;
  display: inline-block;
  border-left: 1px dashed #eee;
  font-family: montserrat;
  float: right;
}

.aliasinfoleft {
  height: 100px;
  width: 160px;
  display: inline-block;
  float: left;
  margin-right: 10px;
}

.aliasinfoleft k {
  display: block;
  width: 150px;
  height: 10px;
  background-color: #fafafa;
  padding: 8px 20px 15px 5px;
}

.aliasinfoleft l {
  width: 50px;
  font-size: 15px;
  border-right: 1px dashed #bbb;
  color: rgba(163, 135, 163, 1);
  /***CHANGE TO GROUP COLOR***/
  float: left;
}

.aliasinfoleft m {
  font-size: 10px;
  text-transform: lowercase;
  float: right;
  color: #aaa;
  letter-spacing: 1px;
  padding-top: 2px;
}

.aliasinfomid {
  height: 100px;
  width: 200px;
  display: inline-block;
  float: left;
  margin-left: 10px;
  font-family: montserrat;
  font-size: 11px;
}

.aliasinfomid k {
  display: block;
  width: 175px;
  height: 25px;
  background-color: #fafafa;
  padding: 8px 20px 15px 5px;
}

.aliasinfomid l {
  width: 70px;
  font-size: 25px;
  border-right: 1px dashed #bbb;
  color: rgba(163, 135, 163, 1);
  /***GROUP COLOR***/
  padding-top: 3px;
  float: left;
}

.aliasinfomid m {
  font-size: 12px;
  text-transform: lowercase;
  float: right;
  color: #aaa;
  letter-spacing: 1px;
  padding-top: 7px;
  overflow: hidden;
}

.aliasname {
  height: 60px;
  width: 200px;
  padding: 25px 15px 15px 15px;
  font-size: 11px;
  letter-spacing: 2px;
  display: inline-block;
  float: right;
  color: #aaa;
}

.aliasname n {
  display: block;
  font-size: 22px;
  letter-spacing: 1px;
  font-family: poppins;
  font-weight: bold;
}
代码语言:javascript
复制
<div id="g-<!-- |g_id| -->">

  <center>
    <div class="posting">
      <a name='entry<!-- |pid| -->'></a>
      <div class="proftop">
        <div class="proftopname">
          <!-- |name| -->
        </div>

        <div class="fakebar1"></div>
        <div class="fakebar2"></div>
        <div class="proftoppic">
          <img src="<!-- |field_24| -->">
        </div>
      </div>

      <div class="picandlinks">
        <div class="profroundpic"><img src="<!-- |field_25| -->"></div>
        <div class="topicsposts">
          <a href="/index.php?act=Search&CODE=getalluser&mid=<!-- |poster_id| -->&type=topics">
            <g>
              <ion-icon name="folder-open"></ion-icon>
            </g>
          </a>
          <a href="/index.php?act=Search&CODE=getalluser&mid=<!-- |poster_id| -->&type=posts">
            <h>
              <ion-icon name="bookmarks"></ion-icon>
            </h>
          </a>
          <a href="/index.php?act=Msg&CODE=04&MID=<!-- |poster_id| -->">
            <j>
              <ion-icon name="mail"></ion-icon>
            </j>
          </a>
        </div>
      </div>

      <div class="hiddenbubbleone"></div>
      <div class="charinfo">
        <f>
          <!-- |field_3| -->
        </f>
        <k>
          <!-- |field_8| -->
        </k>
        <k>
          <!-- |field_2| -->
        </k>
        <k>
          <!-- |field_4| -->
        </k>
        <k>
          <!-- |field_5| -->/
          <!-- |field_6| -->
        </k>
        <k>
          <!-- |field_7| -->
        </k>
      </div>

      <div class="postdatetime">
        <a href="<!-- |permalink| -->">
          <ion-icon name="arrow-redo"></ion-icon>
        </a>
        <!-- |post_date| -->
      </div>
      <div class="posteditbuttons">
        <!-- |mod_checkbox| -->
        <!-- |edit_button| -->
        <!-- |quote_button| -->
        <!-- |delete_button| -->
        <!-- |report_link| -->
      </div>
      <div class="postarea">
        <!-- |post| -->
      </div>

      <div class="miniholder">
        <div class="miniarea">
          <!-- |mini_profile| -->
        </div>
      </div>

      <div class="bottomcontainer">

        <div class="shipinfo">
          <div class="shipinfo1">
            <div class="shipstatus">
              <d>
                <!-- |field_9| -->
              </d>
              <a href="<!-- |field_11| -->">
                <!-- |field_10| -->
              </a>
            </div>
            <div class="partnergif"><img src="<!-- |field_23| -->"></div>
            <div class="shipgrad"></div>
          </div>

        </div>

        <div class="triggersinfo">
          <div class="triggersinfo1">
            <div class="triggersgrad"></div>
            <div class="triggersicon">
              <ion-icon name="alert-circle"></ion-icon>
              <div class="trigiconpulse"></div>
            </div>
            <div class="triggersheader">triggers
              <w>please tag
                <ion-icon name="warning-sharp"></ion-icon>
              </w>
            </div>
            <div class="triggersbox">
              <!-- |field_22| -->
            </div>
          </div>
        </div>

        <div class="otherlinks">
          <div class="otherlinksleft">
            <g>
              <a href="DIRECTORY">
                <ion-icon name="id-card"></ion-icon>
              </a>
            </g>

            <g>
              <a href="<!-- |field_12| -->" alt="character dev">
                <ion-icon name="color-palette"></ion-icon>
              </a>
            </g>

            <g>
              <a href="<!-- |field_13| -->" alt="ship dev">
                <ion-icon name="heart-half"></ion-icon>
              </a>
            </g>

            <g>
              <a href="<!-- |field_14| -->" alt="instagram">
                <ion-icon name="logo-instagram"></ion-icon>
              </a>
            </g>

            <g>
              <a href="<!-- |field_15| -->" alt="request">
                <ion-icon name="pricetags"></ion-icon>
              </a>
            </g>
          </div>

          <div class="otherlinksright">
            <div class="aliasinfoleft">
              <k>
                <l>
                  <ion-icon name="fitness"></ion-icon>
                </l>
                <m>
                  <!-- |field_16| -->
                </m>
              </k>

              <k style="border-bottom: 1px dashed #DDD; border-top: 1px dashed #DDD;">
                <l>
                  <ion-icon name="shirt"></ion-icon>
                </l>
                <m>
                  <!-- |field_17| -->
                </m>
              </k>

              <k>
                <l>
                  <ion-icon name="earth"></ion-icon>
                </l>
                <m>
                  <!-- |field_18| -->
                </m>
              </k>
            </div>

            <div class="aliasinfomid">
              <k>
                <l>
                  <ion-icon name="eye-off"></ion-icon>
                </l>
                <m>
                  <!-- |field_19| -->
                </m>
              </k>

              <k style="margin-top: 5px;">
                <l>
                  <ion-icon name="flash"></ion-icon>
                </l>
                <m>
                  <!-- |field_20| -->
                </m>
              </k>
            </div>

            <div class="aliasname">written by
              <n>
                <!-- |field_21| -->
              </n>
            </div>
          </div>
        </div>

        <div style="clear: both;"></div>
      </div>
    </div>
  </center>

</div>

EN

回答 1

Stack Overflow用户

发布于 2022-08-19 01:17:01

看到您的代码,我猜您对代码所做的事情不太了解。这里有一个最低版本的东西,我可以想象是什么,你正在寻找。

当您使用float时,元素本身不再占用空间,并开始在其父元素中浮动,因此在您的示例中,不应该使用它。

代码语言:javascript
复制
// Get all comments with class 'comment'
const comment = document.querySelectorAll('.comment');

// Iterate the comments in order to make it multiple
comment.forEach( function(element) {

  // Add click to every element
  element.addEventListener('click',function() {
  
    // Remove class to make it full size
    this.classList.remove('short_comment');
    
    //Get the button of that block and make it dissapear
    var button_read_more = this.querySelectorAll('.read_more');
    button_read_more[0].remove();

  });
});
代码语言:javascript
复制
footer {
  width: 100%;
  background: green;
}

footer div {
  padding: 50px;
}

/* No floating */
.short_comment .content {
  max-height: 25px;
  background: yellow;
  overflow: hidden;
}
代码语言:javascript
复制
<div class="comment short_comment">
  <p class="content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
  </p>
  <button class="read_more">read all</button>
</div>

<footer>
  <div>This is the footer</div>
</footer>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73409776

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档