html - 不使用 display flex 的水平响应 div

Question

我正在尝试对齐 2 个水平 div，它们也会响应。但由于某种原因，第二个 div 在第一个之后下降。

我对 div #content-twinwidth-container 使用了 display: flex;。它有效，但我想在不使用 display flex 的情况下进行。

*,
*:before,
*:after {
  box-sizing: border-box;
}

.clearfix:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
}

#content-twinwidth-container {
  max-width: 1002px;
  width: 100%;
}

#content-twinwidth-container #sidebar1 {
  background: #323537 none repeat scroll 0 0;
  float: left;
  margin-top: 0;
  max-width: 245px;
  padding: 18px 15px 28px;
  width: 100%;
}

#content-twinwidth-container #sidebar1 h2 {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  margin-bottom: 0;
  padding: 0 0 1rem;
}

#content-home h2 {
  background: #ff2bff none repeat scroll 0 0;
  color: #fff;
  display: block;
  font-size: 20px;
  font-weight: normal;
  margin-bottom: 0.2rem;
  padding: 12px 0 10px 15px;
  width: 100%;
}

#content-twinwidth-container #sidebar1-right {
  background: #ddd none repeat scroll 0 0;
  clear: none;
  float: left;
  max-width: 740px;
  padding: 0 0 0 1.2rem;
  width: 100%;
}

#sidebar1-right h1 {
  clear: none !important;
  color: #80e2ee;
  display: block;
  float: none !important;
  font-family: arial;
  font-size: 22px;
  font-style: normal;
  margin-bottom: 10px;
  padding: 0 !important;
  text-align: left;
  width: 100% !important;
}

<div id="content-twinwidth-container" class="clearfix">
  <!-- BOF SIDEBAR 1 -->
  <div id="sidebar1" class="clearfix">
    <h2>Summary</h2>
  </div>
  <!-- EOF SIDEBAR 1 -->

  <div id="sidebar1-right" class="clearfix">
    <h1>Client Area</h1>
  </div>
</div>

非常感谢任何帮助。

Answer 1

这是一个用flexbox很容易解决的布局问题。这可能是创建 flexbox 的原因之一。但是，如果您希望两个 div 与 float 位于同一行，则必须调整它们的宽度以在它们之间划分可用空间。

*,
*:before,
*:after {
  box-sizing: border-box;
}
.clearfix:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
}
#content-twinwidth-container {
  max-width: 1002px;
  width: 100%;
}
#content-twinwidth-container #sidebar1 {
  background: #323537 none repeat scroll 0 0;
  float: left;
  margin-top: 0;
  /* max-width: 245px; */
  padding: 18px 15px 28px;
  width: 25%;
}
#content-twinwidth-container #sidebar1 h2 {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  margin-bottom: 0;
  padding: 0 0 1rem;
}
#content-home h2 {
  background: #ff2bff none repeat scroll 0 0;
  color: #fff;
  display: block;
  font-size: 20px;
  font-weight: normal;
  margin-bottom: 0.2rem;
  padding: 12px 0 10px 15px;
  width: 100%;
}
#content-twinwidth-container #sidebar1-right {
  background: #ddd none repeat scroll 0 0;
  clear: none;
  float: left;
  /* max-width: 740px; */
  padding: 0 0 0 1.2rem;
  width: 75%;
}
#sidebar1-right h1 {
  clear: none !important;
  color: #80e2ee;
  display: block;
  float: none !important;
  font-family: arial;
  font-size: 22px;
  font-style: normal;
  margin-bottom: 10px;
  padding: 0 !important;
  text-align: left;
  width: 100% !important;
}

<div id="content-twinwidth-container" class="clearfix">
  <!-- BOF SIDEBAR 1 -->
  <div id="sidebar1" class="clearfix">
    <h2>Summary</h2>
  </div>
  <!-- EOF SIDEBAR 1 -->

  <div id="sidebar1-right" class="clearfix">
    <h1>Client Area</h1>
  </div>
</div>