Выравнивание div под другим div

Я новичок в этой части веб-разработки, и я ничего не понимаю, точнее, на стороне выравнивания. В моем проекте у меня есть область функций, и когда я ее добавляю, она добавляет меня дальше, и я хочу, чтобы она была внизу, под этой строкой поиска и изображением. 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

Всего 1 ответ


Вы должны добавить изображение в HTML, а затем применить эти свойства float: left; ширина: 100%; к слою, который обернуть искатель и изображение.

Если вы примените в качестве фона изображение в CSS, вы не сможете этого сделать.


Есть идеи?

10000