将div放在另一个div旁边

Question

如何实现以下效果:

IMG

我有这个:

<div id='div1'>
text
<div id='div2'>text</div>
</div>
#div1{
text-align:center;
background:blue;
width:100px;
}
#div2{
position: absolute;
background:red;
top:8px;
left:108px;
}

但是当窗口大小调整时，div 2相对于窗口大小移动

Answer 1

创建一个flexbox容器(参见:https://css-tricks.com/snippets/css/a-guide-to-flexbox/)，然后以这种方式定位它们。你可以通过定位来实现，但对于你想要实现的目标来说，这似乎是不必要的复杂，而且当你调整屏幕大小时，你会发现这会带来更多问题。位置是相对的，所以当你的屏幕尺寸改变时，你的位置也会改变。如果你想让元素出现在特定的位置和布局中，这个方法可以让你更好地控制元素的位置。

.container {
display: flex;
flex-direction: row;
border: 1px solid black;
width: 200px;
}
#div1 {
text-align: center;
background: blue;
width: 100px;
height: 200px;
}
#div2 {
background: red;
margin-top: 50px;
width: 100px;
height: 100px;
}

<div class="container">
<div id='div2'>text</div>
<div id='div1'>text</div>
</div>