无法并排排列两个div

Question

好的，所以我知道 Whosebug 上有一些类似的问题已经得到解答，但它们对我没有帮助。

我正在构建消息服务，为此我有两个 div，contacts_box (300px) 和 message_box(500px)。它们都包含在父 div 中，即 width 中的 800px。我想要 align 这两个 divs 在父 div 中并排。但无论我做什么，我就是无法让它们对齐！

请看看我的 HTML 和 CSS 并指出我哪里出错了？

* {
    margin: 0;
    padding: 0;
}
.page_layout {
    position: fixed;
    top: 50px;
    width: 100%;
    height: 100%;
    border: 1px solid green;
}
.page_container {
    width: 800px;
    height: 100%;
    margin: 0 auto;
    clear: both;
    border: 1px solid blue;
}
// Contacts Box and its elements  
.contacts_box {
    float:left;
    height:100%;
    width:300px;
    border:1px dashed magenta;
}
// Message Box and its elements
.message_box {
    float:right;
    height:100%;
    width:500px;
    border:1px dashed lemonchiffon;
}

<html>
  <head>
   <link rel="stylesheet" href="http://kinskeep.com/test.css">
  </head>
<body>
<div class="page_layout">
  <div class="page_container">
    <div class="contacts_box"> CONTACTS BOX </div>
    <div class="message_box">
      <div class="message_displayBox"> Message Box </div>
      <div class="message_textBox"> </div>
    </div>
  </div>
</div>
</body>
</html>

Answer 1

最基本的解决方法：div的边框不计入宽度。所以你要么需要计算宽度为

width1 + border1 + width2 + border2 = 800px

或者使您的容器 div 更大。

Answer 2

您的包含 width:300px 和 border:1px 的容器作为一个整体的宽度为 301 像素。尝试将宽度更改为 299px 或将 802px 设为更大的框

Answer 3

<html>
  <head>
    <link rel="stylesheet" href="http://kinskeep.com/test.css">
  </head>  
  <style>
*{
    margin:0;
    padding:0;
}

.page_layout
{
  position:fixed;
  top:50px;
  width:100%;
  height:100%;
  border:1px solid green;
}

.page_container
{
  width:800px;
  height:100%;
  margin: 0 auto;
  clear:both;
  border:1px solid blue;
}



.contacts_box {
    float: left;
    height: 100%;
    width: 298px;
     border: 1px dashed magenta;
}


.message_box {
    float: right;
    height: 100%;
    width: 498px;
     border: 1px dashed lemonchiffon; 
}
</style>
  <body>
    <div class="page_layout">
    <div class="page_container">
     <div class="contacts_box">
      CONTACTS BOX
     </div>
     <div class="message_box">
      <div class="message_displayBox">
         Message Box
      </div>
      <div class="message_textBox">
      </div>

     </div>
    </div>
   </div>

  </body>
</html>
</html>

如果要添加边框，则将宽度减小与您采用边框相同的像素比如将它们设为 498 和 298 像素分辨率。

Answer 4

你的评论方式有误。在 Vanilla CSS - 我们使用 /* Your comment */ 发表评论。

// - 在 LESS、SASS、Stylus 类预处理器中受支持。

如果您在浏览器上运行您的代码，您可以看到，联系人框和消息框的 CSS 的 none 正在运行。

*{
    margin:0;
    padding:0;
}

.page_layout
{
  position:fixed;
  top:50px;
  width:100%;
  height:100%;
  border:1px solid green;
}

.page_container
{
  width:800px;
  height:100%;
  margin: 0 auto;
  clear:both;
  border:1px solid blue;
}

/* Contacts Box and its elements */

.contacts_box
{
  float:left;
  height:100%;
  width:300px;
  border:1px dashed magenta;
}

/* Message Box and its elements */

.message_box
{
  float:right;
  height:100%;
  width:500px;
  border:1px dashed lemonchiffon;
}

<html>
  <head>
    <link rel="stylesheet" href="http://kinskeep.com/test.css">
  </head>  
  
  <body>
    <div class="page_layout">
    <div class="page_container">
     <div class="contacts_box">
      CONTACTS BOX
     </div>
    
     <div class="message_box">
      <div class="message_displayBox">
       Message Box
      </div>
      
      <div class="message_textBox">
      </div>
      
     </div>
    </div>
   </div>

  </body>
</html>

Answer 5

您可以使用 box-sizing 来解决问题，而不是计算宽度和边框宽度：

将 box-sizing: border-box 添加到内部容器，将 box-sizing: content-box 添加到外部容器，就这样！

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.page_layout {
  position: fixed;
  top: 50px;
  width: 100%;
  height: 100%;
  border: 1px solid green;
}
.page_container {
  width: 800px;
  height: 100%;
  margin: 0 auto;
  clear: both;
  border: 1px solid blue;
  box-sizing: content-box;
}
 .contacts_box {
  float: left;
  height: 100%;
  width: 300px;
  border: 1px dashed magenta;
}
 .message_box {
  float: right;
  height: 100%;
  width: 500px;
  border: 1px dashed lemonchiffon;
}

<body>
  <div class="page_layout">
    <div class="page_container">
      <div class="contacts_box">
        CONTACTS BOX
      </div>

      <div class="message_box">
        <div class="message_displayBox">
          Message Box
        </div>

        <div class="message_textBox">
        </div>

      </div>
    </div>
  </div>

</body>

Answer 6

把你的评论放在里面/* Comments Goes Here */

将宽度 px 更改为 % 并使用 box-sizing: border-box; 到浮动 div。

*{
    margin:0;
    padding:0;
}

.page_layout
{
  position:fixed;
  top:50px;
  width:100%;
  height:100%;
  border:1px solid green;
}

.page_container
{
  width:800px;
  height:100%;
  margin: 0 auto;
  clear:both;
  border:1px solid blue;
}

.contacts_box
{
  float:left;
  height:100%;
  width:40%;
  border:1px dashed magenta;
  box-sizing: border-box;
}

.message_box
{
  float:right;
  height:100%;
  width:60%;
  border:1px dashed lemonchiffon;
  box-sizing: border-box;
}

<div class="page_layout">
    <div class="page_container">
        <div class="contacts_box">
            CONTACTS BOX
        </div>
        <div class="message_box">
            <div class="message_displayBox">
                Message Box
            </div>
            <div class="message_textBox">
            </div>
        </div>
    </div>
</div>

Answer 7

问题： 您在两个元素（.contact_box 和 .message_box）中都有边框，并且它们从每边取 1px，因此它们永远不会合在一起，因为没有足够的 space，我建议您使用属性 box-sizing:border-box; 对于这种情况，它会将边框放在元素的内部而不是外部，因此您不必担心它们。

.contacts_box
{
  float:left;
  height:100%;
  width:300px;
  border:1px dashed magenta;
  box-sizing: border-box;
}

.message_box
{
  float:right;
  height:100%;
  width:500px;
  border:1px dashed lemonchiffon;
  box-sizing: border-box;
}

此外，如果您使用的是纯 css（没有预处理器），请使用这样的注释 /* Comment */ 来避免出现问题。

Answer 8

你给内部边框 DIV 所以它也增加了它的实际宽度。因此，如果可能的话，给内部 DIV 颜色或扩展 Parent DIV 宽度。

* {
  margin: 0;
  padding: 0;
}
.page_layout {
  position: fixed;
  top: 50px;
  width: 100%;
  height: 100%;
  border: 1px solid green;
}
.page_container {
  width: 800px;
  height: 100%;
  margin: 0 auto;
  clear: both;
  border: 1px solid blue;
}
.contacts_box {
  float: left;
  height: 100%;
  width: 300px;
  background: blue;
}
.message_box {
  float: right;
  height: 100%;
  width: 500px;
  background: red;
}

<html>

<head>
  <link rel="stylesheet" href="http://kinskeep.com/test.css">
</head>

<body>
  <div class="page_layout">
    <div class="page_container">
      <div class="contacts_box">
        CONTACTS BOX
      </div>

      <div class="message_box">
        <div class="message_displayBox">
          Message Box
        </div>

        <div class="message_textBox">
        </div>

      </div>
    </div>
  </div>

</body>

</html>

注意： 您的代码是正确的，但您在 CSS 中给出了错误的评论。这就是为什么它不起作用。请检查 CSS 部分的评论。在这里，我使用删除评论更新您的代码。它工作正常。

更新

您也可以使用 box-size:border-box outer DIV 和 box-size:content-box到内部 DIV。您也可以使用此方法解决它。

Answer 9

<html>
  <head>
     <style>

.page_layout
{
  position:fixed;
  top:50px;
  width:100%;
  height:100%;
  border:1px solid green;

}

.page_container
{
  width:800px;
  height:100%;
  margin: 0 auto;
  clear:both;
  border:1px solid green;
}

#contacts_box
{
  float:left;
  height:100%;
  width:300px !important;
  background-color:#f9dada !important;
}


#message_box
{
  float:left;
  height:100%;
  width:500px;
  background-color:#deffe5;
}
</style>
  </head>  
  
  <body>
    <div class="page_layout">
    <div class="page_container">
     <div id="contacts_box">
      CONTACTS BOX
     </div>
    
     <div id="message_box">
      Message Box
      
     </div>
    </div>
 </div>

  </body>
</html>

Answer 10

我们必须停止使用浮动并开始使用 flex！

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page_layout {
  position: fixed;
  top: 50px;
  width: 100%;
  height: 100%;
  border: 1px solid green;
}

.page_container {
  display: flex;
  flex-direction: row;
  width: 800px;
  height: 100%;
  margin: 0 auto;
  border: 1px solid blue;
}

.contacts_box {
  flex: 1 0 300px;
  border: 1px dashed magenta;
}

.message_box {
  flex: 1 0 500px;
  border-left: 1px dashed lemonchiffon;
}

<div class="page_layout">
  <div class="page_container">
    <div class="contacts_box">
      CONTACTS BOX
    </div>

    <div class="message_box">
      <div class="message_displayBox">
        Message Box
      </div>

      <div class="message_textBox">
      </div>

    </div>
  </div>
</div>

无法并排排列两个div

Not able to arrange two divs side by side

html

css

css-position

css-float

box-sizing