在另一个 div 下对齐 div答案

【问题标题】：Alignment div under another div在另一个 div 下对齐 div
【发布时间】：2020-01-15 01:10:23
【问题描述】：

我是 Web 开发这方面的初学者，我什么都不懂，更准确地说是对齐方面。在我的项目中，我有功能区域，当我添加它时，它会进一步添加我，我想要它在那个搜索栏和图片下。 https://i.imgur.com/TUy9GIZ.png

这是我的代码：

<body>
  <div class="wrapper">
    <div class="sidebar">
      <h2>Baza de date</h2>
        <ul>
          <li><a href="#"><i class="fas fa-home"></i>Acasa</a></li>
          <li><a href="#"><i class="fas fa-user"></i>Cautare</a></li>
          <li><a href="#"><i class="fas fa-address-card"></i>Adaugare</a></li>
          <li><a href="#"><i class="fas fa-hospital-alt"></i>Centre</a></li>
        </ul> 
    </div>
    <div class="main_content">
      <form>
        <div class="inner-form">
          <div class="input-field first-wrap">
            <div class="input-select">
              <select data-trigger="" name="choices-single-defaul">
                <option placeholder="">Grupe de sange</option>
                <option>0</option>
                <option>A</option>
                <option>B</option>
                <option>AB</option>
              </select>
            </div>
          </div>
          <div class="input-field second-wrap">
            <input id="search" type="text" placeholder="Cantitatea de sange" />
          </div>
          <div class="input-field third-wrap">
            <button class="btn-search" type="button">Search</button>
          </div>
        </div>
      </form>
    </div>
    <div class="container py-5 my-5 z-depth-1">
      <section class="p-md-3 mx-md-5 text-lg-left">
        <h2 class="font-weight-bold text-center mb-5 pb-3">Features</h2>
        <div class="row text-center d-flex justify-content-center">
          <div class="col-lg-3 col-md-6 mb-lg-0 mb-5">
            <i class="fas fa-map-marker-alt fa-3x indigo-text mb-4"></i>
            <h4 class="font-weight-bold mb-4">Feature 1</h4>
            <p class="text-muted px-2 mb-lg-0">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </p>
          </div>
        </div>
      </section>
      </div>
  </div>
  <script src="js/extention/choices.js"></script>
    <script>
      const choices = new Choices('[data-trigger]',
      {
        searchEnabled: false,
        itemSelectText: '',
      });

    </script>
</body>

非常感谢！ :D

【问题讨论】：

你在使用 Bootstrap 吗？
@j08691 是的，使用引导程序
你能分享一下 CSS 吗？
@prathameshk73 这里：pastebin.com/iPcJCc5U

标签： html css bootstrap-4

【解决方案1】：

您必须在 html 中添加图像，然后应用这些属性 float:left;宽度：100%；到包裹搜索器和图像的层。

如果您在 CSS 中将图像应用为背景，则不能这样做。

【讨论】：

您仍然在 CSS 属性中将图像作为背景，因此首先您必须在 HTML 中将图像添加为标签。