Question

我试过这个。但它不起作用。我不知道为什么它让父div看起来像那样。我希望divisionContainer包含它们。但它看起来并不像那样。

* {
  box-sizing: border-box;
}

body {
  font-family: arial;
}

.mainContainer {
  border: 1px solid #000;
  width: 65%;
}

.header {
  width: 100%;
  height: 85px;
  background: #19578c;
}

.header .container {
  padding: 5px;
  float: right;
}

.header .headerTitle {
  color: #4e94d0;
  ;
  font-family: monospace;
  margin: 0;
  font-size: 300%;
}

.header .navBar li {
  display: inline;
  padding: 5px;
}


/* here's the problem */

.divisionContainer {
  border: 1px solid #000;
  margin-top: 2px;
}

.sidebarContainer {
  width: 30%;
  float: left;
}

.contentContainer {
  width: 70%;
  float: right;
}


/* here's the problem */

.navBar {
  list-style: none;
  padding: 0;
  margin: 5px 0 0 0;
  color: white;
}

<html>

<head>
  <title>thepoopstation</title>
</head>

<body>
  <div class="mainContainer">
    <div class="header">
      <div class="container">
        <h1 class="headerTitle">[thepoopstation]</h1>
        <ul class="navBar">
          <li>home</li>
          <li>search</li>
          <li>global</li>
        </ul>
      </div>
    </div>
    <div class="divisionContainer">
      <div class="sidebarContainer">
        <div class="container">
          <ul class="navBar">
            <li><a href="#">my profile</a></li>
            <li><a href="#">my friends</a></li>
          </ul>
        </div>
      </div>
      <div class="contentContainer">
        <div class="container">
          <div class="containerHeading">about thepoopstation</div>
          <div>
          </div>
        </div>
      </div>
</body>

</html>

似乎父divisionContainer根本不包含它们。我想解决它。

Answer 1

因为float如何工作...浮动元素是不可用的...所以你需要在该div下面放置一个in-flow元素来强制父div使用所有内部元素空间:after伪元素

Stack Snippet

＆＃13;

* {
  box-sizing: border-box;
}

body {
  font-family: arial;
}

.mainContainer {
  border: 1px solid #000;
  width: 65%;
}

.header {
  width: 100%;
  height: 85px;
  background: #19578c;
}

.header .container {
  padding: 5px;
  float: right;
}

.header .headerTitle {
  color: #4e94d0;
  ;
  font-family: monospace;
  margin: 0;
  font-size: 300%;
}

.header .navBar li {
  display: inline;
  padding: 5px;
}


/* here's the problem */

.divisionContainer {
  border: 1px solid #000;
  margin-top: 2px;
}

.sidebarContainer {
  width: 30%;
  float: left;
}

.contentContainer {
  width: 70%;
  float: right;
}


/* here's the problem */

.navBar {
  list-style: none;
  padding: 0;
  margin: 5px 0 0 0;
  color: white;
}

.divisionContainer:after {
  content: "";
  display: table;
  clear: both;
}

＆＃13;

<div class="mainContainer">
  <div class="header">
    <div class="container">
      <h1 class="headerTitle">[thepoopstation]</h1>
      <ul class="navBar">
        <li>home</li>
        <li>search</li>
        <li>global</li>
      </ul>
    </div>
  </div>
  <div class="divisionContainer">
    <div class="sidebarContainer">
      <div class="container">
        <ul class="navBar">
          <li><a href="#">my profile</a></li>
          <li><a href="#">my friends</a></li>
        </ul>
      </div>
    </div>
    <div class="contentContainer">
      <div class="container">
        <div class="containerHeading">about thepoopstation</div>
        <div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

div中的分区（如侧边栏）无法正常工作

1 个答案: