Question

我正在尝试制作一个非常简单的.html来进行学习。

我试图将两个div彼此相邻，但我无法做到。

到目前为止，我设法做到了，但如果我添加＆＃34;宽度＆＃34;它倒了，如果我放一个浮子：左;它工作但其他div不填充页面的其余部分。

风格

#video{

    width: 50%;
    height: 100%;
    border-style: solid;
    float: left;
}
#chat{

    width: 50%;
    height: 100%;
    border-style: solid;
    float: left;
}

#caja{

    overflow: hidden;

}

</head>
   <body>
     <div id="caja">
       <div id="video">
       TEST
       </div>
     <div id="chat">
     TEST
     </div>
   </div>
</body>

Answer 1

你的边界溢出来了。

尝试将box-sizing: border-box设置为两个div：

#video{

    width: 50%;
    height: 100%;
    border-style: solid;
    float: left;
    box-sizing: border-box;
}
#chat{

    width: 50%;
    height: 100%;
    border-style: solid;
    float: left;
    box-sizing: border-box;
}

Answer 2

虽然您没有指定尺寸，但边框是等式的一部分。边框将设置框内的边框。不确定每个浏览器是否有所不同。

MDN box-sizing

Answer 3

对内部div使用宽度为50％的display: inline。

以下css将解决此问题。

CSS

 #video{
        width: 50%;
        height: 100%;
        border-style: solid;
        display: inline;
        box-sizing: border-box;
    }
    #chat{

        width: 50%;
        height: 100%;
        border-style: solid;
        display: inline;
        box-sizing: border-box;

    }

    #caja{
       width: 100%;
    }

HTML

 <div id="caja">
       <div id="video">
       TEST
       </div>
     <div id="chat">
     TEST
     </div>
   </div>

https://jsfiddle.net/uo5qfj2t/

Answer 4

您可以使用另一种方法使用flexbox：

#video {
    width:50%;
    border-style: solid;
}

#chat {
    width:50%;
    border-style: solid;
}

#caja {
  display: flex;
  flex-wrap: nowrap;
}

Answer 5

*{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

添加此属性也是由于div的div总宽度为50％+边框宽度，此属性包括宽度边框。

Answer 6

我会丢弃浮动并使用flexbox。

这是我用一堆好东西制作的codepen。

请参阅Simple flexbox layout上的Craig Curtis（@craigocurtis）的笔CodePen。

HTML

 <div id="caja" class="flex-container fullheight fullwidth">
   <div id="video" class="flex-item-6 flex-container-vh-center">
     <div class="flex-item">Video</div>
   </div>
   <div id="chat" class="flex-item-6 flex-container-vh-center">
       <div class="flex-item">Chat</div>
   </div>
 </div>

CSS

/* body reset - to get rid of default margins */
body {
    margin: 0;
}

/* basic horizontal alignment */
.flex-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
/* based off of 12-column layout (like Bootstrap) */
.flex-item-6 {
   -webkit-flex: 0 1 50%;
    -ms-flex: 0 1 50%;
    flex: 0 1 50%;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}
/* perfect vertical and horizontal centering */
.flex-container-vh-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;    
}
/* simple flex item child maintaining original dimensions */
.flex-item {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}
/* full height */
.fullheight {
    /* a nice way to get the viewport height in percentage */
    min-height: 100vh;
}
.fullwidth {
    /* another good way to get the viewport width in percentage */
    width: 100vw;
}
#caja {
    /* I can relax! */
}
#video, #chat {
    /* rems are better than px since px keep getting smaller. rems are units based off of hte root font size, and don't change */
    border: 0.25rem solid black;
    color: white;
    font-size: 4rem;
    font-family: sans-serif; /* a more readable font family */
}
#video {
    /* just a fun gradient with ridiculous html colors */
    background: linear-gradient(lime,tomato);  
}
#chat {
    /* a better way of controlling colors via rgba alpha scale, good for transparent-esque overlays */
    background: linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.75));
}

Drop float，因为它们将内容从正常流中拉出并获得真正的bug并需要clearfixes，而是使用flexbox。
使用可重复使用的类而不是id
此代码可能看起来令人生畏，但有一种超级简单的方法来创建快速布局。使用Flexy Box - 它将解决几乎所有的布局问题！ http://the-echoplex.net/flexyboxes/

如何将两个div放在一起？

6 个答案: