Question

我需要知道为什么我不能将我的侧边栏放在我的包装div中以保持在右边，而我的main_content div保留在我的包装器的左侧。我想要以下型号：

       WRAPPER DIV:
   ______________________________
  {                   /  sidebar }
  {                   /   div    }
  {      m_c div      /          }
  {                   /          }
  { __________________/__________}

1）我错过了哪些代码不允许我将包装内的div对齐？

2）另外，我在每个div周围绘制了一个边框，以便我可以轻松地将它们可视化;现在为什么我的main_content div会在文本出现时消失？如果你在小提琴中运行它，你可以看到我在说什么。文本附近的边界有洞;我怎么能让它消失？

谢谢。

＆＃13;

/*Comment example - created 10/12/16*/

* {
  font-family: 'Libre Franklin', sans-serif;
  background-color: rgb(155, 155, 155);
}

.wrapper { /*black*/
  width:960px;
  min-height: 700px;
  border: 1px solid rgb(0,0,0);
  margin: 0 auto;
  display:inline-block;
}

.main_content{ /*Green*/
  width: 730px;
  min-height: inherit;
  border: 2px solid rgb(222, 26, 26);
  float:left;

}

.sidebar_one{ /*White*/
  width: 230px;
  min-height:inherit;
  border: 1px solid rgb(255,255,255);
  float:right;
  position:absolute;
  color:rgb(242, 70, 16);
  overflow:hidden;
}

h2 {
  position:relative;
  left:5px;
}

h5 {
  position:relative;
  left:5px;
}

p {
  position:relative;
  left:5px;
}

＆＃13;

   

<!DOCTYPE html>
<!--Created 10/12/16  ///// ideas: emrisk-->
<html>
  <link href="https://fonts.googleapis.com/css?family=Libre+Franklin" rel="stylesheet">

  <head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <!--Added external Stylesheet-->
    <script src="script.js"></script>
    <!--Added external javascript file-->
  </head>

  <body>
    <div class="wrapper">
      <div class="main_content">
        <h2>TEST </h2>
        <!-- END OF H2 -->
        <h5>random test standard of web-based and cloud-based server systems since 2007.
                           </h5>
        <!-- END OF H5 -->
        <p>
          Our clients have trusted our team for almost a decade and throughout the years we have proven our worth over and over again.
        </p>
        <!-- END OF P -->
      </div>
      <!-- END OF MAIN_CONTENT -->
      <div class="sidebar_one">
        Test
      </div>
      <!-- END OF SIDEBAR_ONE -->
    </div>
    <!-- END OF wrapper -->

  </body>

</html>

＆＃13;

谢谢。

Answer 1

试试flexbox。有一个很棒的工具可以发现它是如何工作的here，它完全消除了CSS布局中的肮脏。

Answer 2

从下方移除位置：绝对并减小sidebar_one的宽度： -

.sidebar_one{ /*White*/
  width: 210px;
  min-height:inherit;
  border: 1px solid rgb(255,255,255);
  float:right;

  color:rgb(242, 70, 16);
  overflow:hidden;
}

包装器div内的div未正确对齐

2 个答案: