logo标签列表

使用inline-block无法将两个div放在同一行上

htmlcss
3
我正在尝试将两个 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
因为默认情况下，行内元素会对齐它们的基线。 - Mr. Alien
将float:left添加到两个div中。 - Manish
将 display: flex; 添加到 div#page。 - Haseeb Zulfiqar
8个回答
3

在你的第二个框的css中添加这行代码：

div#second-box{
  display:inline-block;
  width:200px;
  height:200px;
  padding:10px;
  border:1px solid green;
  vertical-align: top; // add this line
}
这是针对问题的实际解决方案，而非翻译内容。 - Haseeb Zulfiqar
这是正确的解决方案。我们不能使用浮点数（如大多数答案中建议的）因为那会影响放置在其后面的其他元素。 - amansoni211
是的，我们不能使用浮点数，但我们也不能使用 vertical-align: top。如果在同一个包装器中有许多兄弟元素，而且最重要的是，他不需要执行 vertical-align: top。只需将 display: flex; 添加到 div#page 中，就可以轻松完成。 - Haseeb Zulfiqar
3

简短明了
我的解决方案非常简单；我使用更少的 CSS，而将两个 DIV 对齐的秘密就是在你的 #page DIV 中添加 display: inline-flex;。 下面是完整的代码：

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;
}

请点击 此处 查看可用的CODEPEN。

[更新：09/13/2020] 如果您想使用CSS网格而不是内联弹性布局，请

#page2{
  padding:20px;
  display: grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr) ) ;
}

#first-new-box, #second-new-box{
  height:150px;
  border: 1px solid black;
  padding:10px
}
#second-new-box{
  border: 1px solid green;
}
<div id="page2">
    <div id="first-new-box">   
      This is the first new box
    </div>
    <div id="second-new-box">
        this is the second new box
    </div>  
</div>

2

在添加内容到第一个块时，它也能正常工作。

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>

2
尝试这段代码。
div#first-box{
  width:200px;
  height:200px;
  display:inline-block;
  border:1px groove black;
  float: left;
}

live demo - http://codepen.io/anon/pen/YNgqRN

1
尝试这个... 

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;
}
<div id="page">
    <div id="first-box">   
    </div>
    <div id="second-box">
        this is second box
    </div>  
 </div>

它显示了第二个框，这不是要求的。 - kritikaTalwar
float 不是一个合适的解决方案，因为它会使 div 元素的位置混乱。 - Haseeb Zulfiqar
1
将 display:table-cell 应用到每个 id 上，并添加 vertical-align:top 以使文本显示在顶部，但对于盒子对齐不重要。然后你就完成了。删除任何浮动。 

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;
}
<div id="page">
    <div id="first-box">   
    </div>
    <div id="second-box">
        this is second box
    </div>  
 </div>

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

只需用这个代码替换您的代码

那到底是什么意思？顺便问一下。 - Haseeb Zulfiqar
每当我们在一个 div 中调用另一个 div 时，嵌套的 div 将占据整行。因此，为了消除这种情况，我们使用 clear all、right 或 left。并且 clear 与 break 一起使用，这是消除嵌套 div 占用额外空间的最简单方法。 - Gaurav Arora
1
将您的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;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接