html - 将 Div 设为新行

Question

我有三个div

<div id="example"></div>
<div id="gallery"></div> 
<br/>                   
<div id="autoshootmsg" style="display: none;">          
   <span id="timer"></span>
   <span> seconds remaining</span>
</div> 

我希望它像下图一样:

我将如何通过 css 做到这一点？下面是我的 CSS 代码:

div#gallery
{
    margin-right: 10px;
}

div#example,
div#gallery
{    
    border: 2px;
    border-style: solid;
    border-color: black; 
    margin-left: 10px; 
}
div#example,
div#gallery
{
    width: 320px;
    height: 240px;
    display: inline-block; 
}

Answer 1

如果正确设置宽度，它将起作用:

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

#example, #gallery, #autoshootmsg {
    display: inline-block;
    border: 1px solid black;
    padding: 5px;
    height: 50px;
}

#example, #gallery {
    width: 50%;
}

#autoshootmsg {
    width: 100%;
}

边框框模型允许您将边框和填充作为宽度和高度的一部分。这意味着边框和填充不会占用额外空间。

编辑:这是一个 preview .您必须摆脱内联 block 属性之间的空间。这就是我使用 HTML 评论“hack”的原因。