logo标签列表

DIV，网格和选项卡不在内容中。

htmlcss
5
我使用一个PHP函数来将我的页面内容放在index.php中，但是当我在内容中使用网格（tab）时，它超出了内容边界。
下面是一些代码摘录，您可以在这里查看该网站：(链接已删除 > 问题已解决)
你能用图片澄清一下吗？ - chirag solanki
查看您的网站，我没有发现任何内容错位的问题。您是否有一个带有示例的图片可以提供给我们？ - Deathstorm
5个回答
4

将 .clearfix 放在 .content 的开头。

如果把它放在选项卡后面，边框会正确显示。

感谢@Roberrt的编辑。为什么要踩我呢？我在开发者工具栏中尝试了这个解决方案，它是有效的。 - Laposhasú Acsa
3
非浮动元素只会占用其非浮动子元素或内容的高度。
示例：
情况1：非浮动父元素和非浮动子元素。父元素将占用其子元素的全部高度。 

div{
  border:1px solid;
}
<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>

情况2：非浮动父元素，但是子元素浮动。同样，父元素只占用非浮动子元素的高度，因为浮动元素不会影响父元素的大小。

div{
  border:1px solid;
}
.float{
  float:left;
  width:50%;
}
<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>

情况3：浮动的父元素和浮动的子元素。 现在这种情况实际上是第二种情况的解决方案，但这种情况/解决方案并不是最佳实践，特别是当您希望父元素居中对齐其父元素时。

现在为什么这种情况能够工作？因为浮动元素将扩展以包含其浮动的子元素。

div{
  border:1px solid;
  float:left;
}
.float{
  float:left;
  width:50%;
}
<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>

现在我们该如何解决第二种情况而不使用第三种情况呢？答案是清除CSS属性。
引用块中写道：清除CSS属性指定元素是否可以在浮动元素之后，或必须被移动下来（清除）到它们下面。清除属性适用于浮动和非浮动元素。
现在我们该如何使用clear呢？
石器时代的解决方案是，在父元素底部放置一个元素，并给它clearfix。这是一个好的解决方案，但每次都要添加额外的元素。当您无法编辑动态HTML时，这个方法就没用了。 MDN 

div.parent{
  border:1px solid;
}
.float{
  float:left;
  width:50%;
}
<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>

现在，如果您不想添加额外的元素，则可以让CSS3为您完成此任务，在父元素底部创建一个带有伪元素:after的元素，然后将其分配给清除浮动元素的工作。
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}


div.parent{
  border:1px solid;
}
.float{
  float:left;
  width:50%;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
<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>

来源

  1. 清除CSS属性
  2. 什么是Clearfix
2

修改CSS使用overflow:hidden;，可以恢复框的样式。

.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;
}
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;
}
0

这一切都是因为你在 .tab3 上使用了 float:left。你可以使用 display:inline-block 替代 float:left，或者在内容上使用 float:left

（就像你的网站上那样）无法正常工作。

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

解决方案1. inline-block

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

解决方案2. 在内容上使用float:left

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

请告诉我这两个解决方案中的哪一个适合您

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接