水平响应div不使用显示flex

Question

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

我将display: flex;用于div #content-twinwidth-container。它工作但我想不使用显示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与浮点数存在于同一行，那么你必须调整它们的宽度来划分它们之间的可用空间。

＆＃13;

＆＃13;

*,
*: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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;