div grid tab不在内容中

时间：2017-06-02 12:13:35

标签： html css

我使用php函数将我的页面内容放在index.php中，但是当我在内容中使用网格（制表符）时，它会从内容边框中删除。

我在下面放了一些代码，你可以在这里看到网站:(链接删除＆gt;问题解决了）

5 个答案:

答案 0 :(得分：5)

非浮动元素仅占其非浮动子项或内容的高度。

实施例

情境1： 非浮动的父级和非浮动的子级。父级元素将占据其子级的全部高度。

＆＃13;
＆＃13; 
div{
  border:1px solid;
}
＆＃13; 
<div class="parent">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
</div>
＆＃13;
＆＃13;
＆＃13;

情境2： 非浮动的父级而且浮动的子级。同样，父元素只占用非浮动子元素的高度，因为浮动元素确实不影响父元素的大小。

＆＃13;
＆＃13; 
div{
  border:1px solid;
}
.float{
  float:left;
  width:50%;
}
＆＃13; 
<div class="parent">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
  
  <p class=float>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
  
  <p class=float>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
</div>
＆＃13;
＆＃13;
＆＃13;

情况3： 浮动的父母和浮动的孩子。现在这种情况实际上是第二种情况的解决方案，但这种情况/解决方案不是最佳做法，特别是当你希望父母居中对齐它的父母。

现在为什么这种情况有效？因为浮动元素将扩展为包含它的浮动子元素。

＆＃13;
＆＃13; 
div{
  border:1px solid;
  float:left;
}
.float{
  float:left;
  width:50%;
}
＆＃13; 
<div class="parent">
  <p  class=float>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
  
  <p class=float>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
  
  <p class=float>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
</div>
＆＃13;
＆＃13;
＆＃13;

现在我们如何在不使用第三种情况的情况下解决第二种情况。答案是明确的CSS属性。

  

clear CSS属性指定元素是否可以在旁边   在它之前的浮动元素或必须向下移动（清除）   在他们之下。 clear属性适用于浮动和   非浮动元素。

MDN

现在我们如何使用clear？

石器时代的解决方案，将一个元素放在父元素的底部并给它clearfix。这是一个很好的解决方案，但每次你必须添加一个额外的元素。无法编辑动态HTML时无法胜任。

＆＃13;
＆＃13; 
div.parent{
  border:1px solid;
}
.float{
  float:left;
  width:50%;
}
＆＃13; 
<div class="parent">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
  
  <p class=float>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
  
  <p class=float>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
  
  
  <div style="clear:both"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

现在你不想添加额外的元素，然后让css3为你做这个工作，在父元素的底部用pseudo:after元素创建和元素，然后为它分配一个工作来清除浮动的元素。 

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

＆＃13;
＆＃13; 
div.parent{
  border:1px solid;
}
.float{
  float:left;
  width:50%;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
＆＃13; 
<div class="parent clearfix">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
  
  <p class=float>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
  
  <p class=float>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magnam, soluta nihil libero sapiente, ullam omnis ipsa adipisci, mollitia vero ea iste nam doloribus iusto voluptatum itaque, dicta fuga assumenda.</p>
  
</div>
＆＃13;
＆＃13;
＆＃13;

<强>来源

  1. Clear CSS property
  2. What is a Clearfix

答案 1 :(得分：4)

您将.clearfix放在.content的开头。

如果将其放在标签后面，边框将正确显示。

答案 2 :(得分：2)

更改CSS使用溢出：隐藏;它恢复框

.content {
    background-color: #fff;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    padding: 15px;
    margin-bottom: 20px;
    clear: both;
    overflow: hidden;
}

答案 3 :(得分：2)

.content {
    background-color: #fff;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    padding: 15px;
    margin-bottom: 20px;
    clear: both;
    float: left;
}

答案 4 :(得分：0)

这一切都是因为您在float:left上使用的.tab3而发生的。您使用display:inline-block代替float:left，或者在内容上使用float:left

无法正常工作（因为它在您的网站上）

＆＃13;
＆＃13; 
body {
  background-color: #fff;
  background-image: url(img/bg.png);
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  font-family: "Ubuntu Light", Ubuntu, sans-serif;
  font-size: 14px;
  overflow-x: hidden;
}

.main {
  width: 676px;
  float: left;
  margin-right: 20px;
}

.content {
  background-color: #fff;
  border-radius: 4px 4px 4px 4px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  padding: 15px;
  margin-bottom: 20px;
  clear: both;
}

.tab3 {
  width: calc(100%/ 3);
  float: left;
}
＆＃13; 
<div class="content">
  <div class="clearfix"></div>
  <div class="side-heading">Habbo</div>
  Op deze pagina vind je de ins en outs van Habbo (Hotel) en Sulake. We bieden je gidsen aan waarin uitleg staat over de talentenmeter, de catalogus, de (oude) Habbo Staff en Moderators, Habbo Club en ga zo maar verder. Ook vind je hier de geschiedenis
  van Habbo. En informatie over het bedrijf achter Habbo, namelijk Sulake. Mis je iets op deze pagina? Neem dan contact op met de webmaster.
  <div class="space"></div>
  <a href="?page=habbo_burgerschap">
    <div class="tab3">
      <div class="block">
        <div class="blocktitle">Habbo Burgerschap</div>
        <div class="blockimage" style="background-image:url(img/content/habbo_burgerschap.png)"></div>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="tab3">
      <div class="block">
        <div class="blocktitle">Archievements</div>
        <div class="blockimage" style="background-image:url(img/bg.png)"></div>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="tab3">
      <div class="block">
        <div class="blocktitle">Habbo Regels</div>
        <div class="blockimage" style="background-image:url(img/bg.png)"></div>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="tab3">
      <div class="block">
        <div class="blocktitle">Habbo Games</div>
        <div class="blockimage" style="background-image:url(img/content/habbo_games.png)"></div>
      </div>
    </div>
  </a>
</div>
＆＃13;
＆＃13;
＆＃13;

解决方案1.内联块

＆＃13;
＆＃13; 
body {
  background-color: #fff;
  background-image: url(img/bg.png);
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  font-family: "Ubuntu Light", Ubuntu, sans-serif;
  font-size: 14px;
  overflow-x: hidden;
}

.main {
  width: 676px;
  float: left;
  margin-right: 20px;
}

.content {
  background-color: #fff;
  border-radius: 4px 4px 4px 4px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  padding: 15px;
  margin-bottom: 20px;
  clear: both;
}

.tab3 {
  width: calc(100%/ 3);
  display:inline-block;
}
＆＃13; 
<div class="content">
  <div class="clearfix"></div>
  <div class="side-heading">Habbo</div>
  Op deze pagina vind je de ins en outs van Habbo (Hotel) en Sulake. We bieden je gidsen aan waarin uitleg staat over de talentenmeter, de catalogus, de (oude) Habbo Staff en Moderators, Habbo Club en ga zo maar verder. Ook vind je hier de geschiedenis
  van Habbo. En informatie over het bedrijf achter Habbo, namelijk Sulake. Mis je iets op deze pagina? Neem dan contact op met de webmaster.
  <div class="space"></div>
  <a href="?page=habbo_burgerschap">
    <div class="tab3">
      <div class="block">
        <div class="blocktitle">Habbo Burgerschap</div>
        <div class="blockimage" style="background-image:url(img/content/habbo_burgerschap.png)"></div>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="tab3">
      <div class="block">
        <div class="blocktitle">Archievements</div>
        <div class="blockimage" style="background-image:url(img/bg.png)"></div>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="tab3">
      <div class="block">
        <div class="blocktitle">Habbo Regels</div>
        <div class="blockimage" style="background-image:url(img/bg.png)"></div>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="tab3">
      <div class="block">
        <div class="blocktitle">Habbo Games</div>
        <div class="blockimage" style="background-image:url(img/content/habbo_games.png)"></div>
      </div>
    </div>
  </a>
</div>
＆＃13;
＆＃13;
＆＃13;

解决方案2。 float：左侧内容

＆＃13;
＆＃13; 
body {
  background-color: #fff;
  background-image: url(img/bg.png);
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  font-family: "Ubuntu Light", Ubuntu, sans-serif;
  font-size: 14px;
  overflow-x: hidden;
}

.main {
  width: 676px;
  float: left;
  margin-right: 20px;
}

.content {
  background-color: #fff;
  border-radius: 4px 4px 4px 4px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  padding: 15px;
  margin-bottom: 20px;
  clear: both;
  float: left;
}

.tab3 {
  width: calc(100%/ 3);
  float: left;
}
＆＃13; 
<div class="content">
  <div class="clearfix"></div>
  <div class="side-heading">Habbo</div>
  Op deze pagina vind je de ins en outs van Habbo (Hotel) en Sulake. We bieden je gidsen aan waarin uitleg staat over de talentenmeter, de catalogus, de (oude) Habbo Staff en Moderators, Habbo Club en ga zo maar verder. Ook vind je hier de geschiedenis
  van Habbo. En informatie over het bedrijf achter Habbo, namelijk Sulake. Mis je iets op deze pagina? Neem dan contact op met de webmaster.
  <div class="space"></div>
  <a href="?page=habbo_burgerschap">
    <div class="tab3">
      <div class="block">
        <div class="blocktitle">Habbo Burgerschap</div>
        <div class="blockimage" style="background-image:url(img/content/habbo_burgerschap.png)"></div>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="tab3">
      <div class="block">
        <div class="blocktitle">Archievements</div>
        <div class="blockimage" style="background-image:url(img/bg.png)"></div>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="tab3">
      <div class="block">
        <div class="blocktitle">Habbo Regels</div>
        <div class="blockimage" style="background-image:url(img/bg.png)"></div>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="tab3">
      <div class="block">
        <div class="blocktitle">Habbo Games</div>
        <div class="blockimage" style="background-image:url(img/content/habbo_games.png)"></div>
      </div>
    </div>
  </a>
</div>
＆＃13;
＆＃13;
＆＃13;

让我知道这两种解决方案中的一种是否适合您

相关问题
最新问题