Question

我正在尝试将<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

Answer 1

使用<br>作为换行符（行尾）。

Answer 2

<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>

我希望这是您正在寻找的解决方案。

此外，您不必在悬停时重复元素的属性。如果仅在悬停时更改了背景，则可以只进行更改，其他属性将保持不变。：）

Answer 3

我认为这是因为CSS中的“位置：绝对”。这使得块元素仅使用所需的空间。您可以在此处了解更多信息：Does adding a position: absolute to a block element make it behave like an inline?

无法将div排列在另一个下方

3 个答案: