将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。您必须摆脱内联块属性之间的空间。这就是我使用HTML评论＆＃34; hack＆＃34;在那。

Answer 2

只需将autoshootmsg div设置为display:inline-block并使其更宽。

div#autoshootmsg
{
    width: 640px; // Twice the width
    height: 240px;
    display: inline-block; 
}

Answer 3

你必须在你的盒子里使用这个代码。

<div id="allwrapper">
  <div class="top">
    <section class="t-left"></section>
    <section class="t-right"></section>
  </div>
  <div class="down">
     <section class="d-box"></section>
  </div>
</div>

Answer 4

  

据我了解您的问题，以下代码可以帮助您

<div id="example" style="border:solid 1px;float:left;width:49.5%;" >1</div>
<div id="gallery" style="border:solid 1px;float:left;width:49.5%;">2</div>
<br/>              
<div id="autoshootmsg" style="border:solid 1px;width:99%;"><span id="timer"></span> <span> seconds remaining</span></div>

<强>演示 - http://jsfiddle.net/jsq2dcLa/

  

谢谢