如何阻止 div 移动到右下角

Question

我在课堂上做一个项目来制作一个网站。我已经尝试了其他答案所说的方法，但它永远不会奏效！

.block1 {
border: 2px dashed #ffffff;
width: 200px;
height: 270px;
padding: 10px;
margin-top: 30%;
margin-left: 20%;
position: relative;
}
.block2 {
border: 2px dashed #ffffff;
width 200px;
height: 270px;
padding: 10px;
margin-top: 30%;
margin-left: 80%;
display: inline-block;
position: relative;
}

<div class="block1">
<p>Everyday life is like programming, I guess. If you love something you can put beauty into it</p>
</div>
<div class="block2">
<p>The past is behind, learn from it. The future is ahead, prepare for it. The present is here, live it</p>
</div>

我只是复制粘贴了基本上我所做的。我目前很新，我只在自己的时间做了一点 html，我已经学会了我在过去 3 周内所做的一切。我的问题是，左边的很好，但右边的div 位于右下角。我尝试使用溢出，因为我认为边距可能会崩溃，但我真的不明白，因为我仍然很新。我希望它位于完全相同的高度和相同的差异，但从屏幕的左侧。我尝试使用左边距，但它仍然不起作用。请帮助我，我真的不明白。

Answer 1

你也需要做.block1display:inline-block;

Answer 2

如果您希望在两个类上应用相同的CSS，则可以为两个类指定相同的类名。在 html 中换行使用<br>. 试试这个，我想按照我的理解。

.block1 {
border: 2px dashed #ffffff;
width: 200px;
height: 270px;
padding: 10px;
margin-top: 30%;
margin-left: 20%;
position: relative;
display: inline-block;
}
.block2 {
margin-top: 10%;
}

<div class="block1"><p>Everyday life is like programming, I guess. If you love something you can put beauty into it</p></div>
<br>
<div class="block1 block2"><p>The past is behind, learn from it. The future is ahead, prepare for it. The present is here, live it</p></div>