将2个元素放在彼此旁边html css

Question

在HTML中使用bootstrap元素我希望将这2个元素放在一个水平线上，但它们看起来像这样＆gt;＆gt;

这是我的代码：

{% extends "header.html" %}

{% block content %}
<br>
<div id="wraper">
<div align='left' dir="rtl" style=" float:left;">
<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </p>
</div>
</div>
<div align="right" style= 'padding-right: 30px; float: right;''>
<div class="card text-white bg-dark mb-3" dir ="rtl" align="right" style="max-width: 18rem;">
  <div class="card-header">معلومات المستخدم</div>
  <div class="card-body">
    <h5 class="card-title">اسم المستخدم الحالى</h5>
    <button type="button" class="btn btn-info">تسجيل الخروج</button>
    <button type="button" class="btn btn-info">تسجيل الدخول</button>
  </div>
</div>
</div>

{% endblock %}

Answer 1

一种快速的方法是使用flexbox。在你的CSS中，试试：

#wraper{
  display:flex;
}

或者，只需添加

style = "display:flex"

到wraper的div标签