Question

我正在尝试将两个div放在同一行。

<div id="page">
    <div id="first-box">   
    </div>
    <div id="second-box">
        this is second box
    </div>  
 </div>

CSS

div#page {
   background-color: slategrey;
   width: 960px;
   height:900px;
   margin: 20px;
   padding:20px;
   border:4px solid blue;
}
div#first-box{
   width:200px;
   height:200px;
   display:inline-block;
   border:1px groove black;
}
div#second-box{
   display:inline-block;
   width:200px;
   height:200px;
   padding:10px;
   border:1px solid green;
}

当我在第二个框中使用vertical-align:top时，它将自己置于同一行。但为什么它表现得那样？谢谢 http://codepen.io/rajinirajadev/pen/xgBVab

Answer 1

试试这个..

＆＃13;

div#page {
background-color: slategrey;
width: 960px;
height:900px;
margin: 20px;
padding:20px;
border:4px solid blue;
}
div#first-box{
width:200px;
height:200px;
display:inline-block;
border:1px groove black;
}
div#second-box{
display:inline-block;
width:200px;
height:200px;
border:1px solid green;
float:left;
}

＆＃13;

<div id="page">
    <div id="first-box">   
    </div>
    <div id="second-box">
        this is second box
    </div>  
 </div>

＆＃13;

Answer 2

在第二个框的css中添加此行：

div#second-box{
  display:inline-block;
  width:200px;
  height:200px;
  padding:10px;
  border:1px solid green;
  vertical-align: top; // add this line
}

Answer 3

试试此代码

div#first-box{
  width:200px;
  height:200px;
  display:inline-block;
  border:1px groove black;
  float: left;
}

现场演示 - http://codepen.io/anon/pen/YNgqRN

Answer 4

在向第一个块添加内容时也可以正常工作

div#page {
background-color: slategrey;
width: 960px;
height:900px;
margin: 20px;
padding:20px;
border:4px solid blue;
}
div#first-box{
width:200px;
height:200px;
 display:inline-block;
border:1px groove black;
}
div#second-box{
display:inline-block;
width:200px;
height:200px;
padding:10px;
border:1px solid green;
}

<div id="page">
    <div id="first-box">
      this is first box
    </div><div id="second-box">
        this is second box
    </div>  
 </div>

Answer 5

<div id="page">
<div id="first-box">   
<br clear="all/">
</div>
<div id="second-box">
    this is second box
</div>

只需用这个替换你的代码

Answer 6

短而甜
我的解决方案非常简单;我使用较少的CSS，而DIV对齐的秘诀就是将display: inline-flex;简单地添加到#page DIV中。以下是完整代码：

HTML

<div id="page">
    <div id="first-box">   
      This is the first box
    </div>
    <div id="second-box">
        this is second box
    </div>  
</div>

CSS

body{
  background:grey;
  color:white;

}
#page{
  padding:20px;
  display: inline-flex;
  display: -webkit-inline-flex; /* Safari */
}
#first-box, #second-box{
  width:200px;
  height:150px;
  border: 1px solid black;
  padding:10px
}
#second-box{
  border: 1px solid green;
}

点击HERE查看有效的CODEPEN

Answer 7

将Gdx.input.setInputProcessor(new GestureDetector(new MyGestureListener()));更改为每个ID＆amp;添加display:table-cell以便在顶部显示文本，但对于框对齐并不重要。你完成了。删除任何浮动。

＆＃13;

vertical-align:top

＆＃13;

div#page {
background-color: slategrey;
width: 960px;
height:900px;
margin: 20px;
padding:20px;
border:4px solid blue;
}
div#first-box{
width:200px;
height:200px;
display:table-cell;
border:1px groove black;
vertical-align:top;
}
div#second-box{
display:table-cell;
width:200px;
height:200px;
border:1px solid green;
vertical-align:top;
}

＆＃13;

Answer 8

使用以下代码替换您的css：添加了Float：left，Position：relative和Margin，它也不会打扰你进一步编码。

div #page {
background-color: slategrey;
width: 960px;
height:900px;
margin: 20px;
padding:20px;
border:4px solid blue;
}

div #first-box{
width:200px;
height:200px;
display:inline-block;
border:1px groove black;
/* extra added 3 lines */
position: relative;
float:left;
margin:10px;
}


div #second-box{
display:inline-block;
width:200px;
height:200px;
padding:10px;
border:1px solid green;
/* extra added 3 lines */
position: relative;
float:left; 
margin:10px;
}

无法使用内联块将两个div放在同一行上

8 个答案: