Невозможно расположить div один под другим

Я пытаюсь расположить свои <div> один под другим, но они все равно оказываются на одной строке, я пытался использовать подход row и col, но все равно это не работает, ответы на SO также не сработали.

В настоящее время мой код такой

.dragAndDropBox{
    position: absolute;
    width: 80%;
    height: 100%;
    border: 1px solid #fff;
    background-color: gainsboro;
    border-radius: 5px;
}

.dragAndDropBox:hover{
    position: absolute;
    width: 80%;
    height: 100%;
    border: 1px solid #fff;
    background-color: gray;
    border-radius: 5px;
}

.dragAndDropBox .dragAndDropUpload{
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
}


.dragAndDropBox .dragAndDropProgressBar{
    position: absolute;
    bottom: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    max-height: 10%;
    outline: none;
}

.dragAndDropBox .dragAndDropText{
    padding-top: 2%;
    text-align: center;
    line-height: 1rem;
    color: #3b3b3b;
    font-family: Arial
}

<div class = "uploadBox w-100">
    <div class = "uploadDropBox">
        <div class = "dragAndDropBox">
            <input
                accept = "image/*"
                class = "dragAndDropUpload"
                type = "file"
            />
            <div class = "dragAndDropText">Drag / Browse</div>
            <div
                bsstyle = "success"
                class = "dragAndDropProgressBar mt-1 progress">
                <div
                    role = "progressbar"
                    class = "progress-bar progress-bar-striped"
                    style = "width: 0%;"
                    aria-valuenow = "0"
                    aria-valuemin = "0"
                    aria-valuemax = "100"
                />
            </div>
        </div>
    </div>
    <div class = "uploadedBox w-100">
        <div>Filename Delete View</div>
    </div>
</div>

Я использую Bootstrap 4.3.1

Я думаю, вы должны изменить абсолютную позицию на относительную.

— 25.04.2019 13:41

css twitter-bootstrap

25.04.2019 13:26

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Используйте <br> в качестве разрыва строки (конец строки).

25.04.2019 13:38

Ответ принят как подходящий

У <div> есть position: absolute, что ставит их друг над другом.

Я бы предложил добавить position: relative к .dragAndDropBox, чтобы все абсолютно позиционированные элементы имели относительный элемент для ссылки.

Вот рабочий пример: https://jsfiddle.net/yjdkne3b/

.dragAndDropBox {
  position: relative;
  width: 80%;
  height: 200px;
  border: 1px solid #fff;
  background-color: gainsboro;
  border-radius: 5px;
}

.dragAndDropBox:hover {
  background-color: gray;
}

.dragAndDropBox .dragAndDropUpload {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
}

.dragAndDropBox .dragAndDropProgressBar {
  position: absolute;
  bottom: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  max-height: 10%;
  outline: none;
}

.dragAndDropBox .dragAndDropText {
  padding-top: 2%;
  text-align: center;
  line-height: 1rem;
  color: #3b3b3b;
}

<div class = "uploadBox w-100">
  <div class = "uploadDropBox">
    <div class = "dragAndDropBox">
      <input accept = "image/*" class = "dragAndDropUpload" type = "file" />
      <div class = "dragAndDropText">Drag / Browse</div>
      <div bsstyle = "success" class = "dragAndDropProgressBar mt-1 progress">
        <div role = "progressbar" class = "progress-bar progress-bar-striped" style = "width: 0%;" aria-valuenow = "0" aria-valuemin = "0" aria-valuemax = "100" />
      </div>
    </div>
  </div>
  <div class = "uploadedBox w-100">
    <div>Filename Delete View</div>
  </div>
</div>

Я надеюсь, что это решение, которое вы ищете.

Кроме того, вам не нужно повторять свойства элемента при наведении. Если при наведении меняется только фон, можно изменить только это, а другие свойства останутся прежними. :)

25.04.2019 13:48

Я думаю, это из-за «position: absolute» в вашем CSS. Это заставляет блочные элементы использовать столько места, сколько им нужно. Подробнее об этом можно прочитать здесь: Добавление position: absolute к блочному элементу приводит к тому, что он ведет себя как встроенный?

25.04.2019 13:50

Другие вопросы по теме

Как включить загрузку с помощью scalajs-bundler

Небольшая горизонтальная прокрутка в HTML, которая составляет 100% vw

CSS из классов не применяется к содержимому навигации

Карточка Bootstrap имеет белую окантовку вокруг изображения

Выпадающее меню навигации не работает в мобильной версии

Как проверить текстовое поле с помощью загрузочного баннера

Для чего нужен класс управления формой начальной загрузки?

Вертикальное выравнивание изображения внутри столбца h-100

Как разместить подзаголовок под фирменным текстом Bootstrap Navbar

Bootstrap 4 Carousel с тегом изображения HTML 5 вместо тега img работает?

Невозможно расположить div один под другим

Ответы 3

Другие вопросы по теме

Похожие вопросы