Question

我的Web应用程序中有此html代码，该代码在某些输入字段上方显示了针对不同条件的不同文本。

我的问题是，输入字段由文本向下移动，但是我希望它们始终位于相同的位置，而不管@if（$ numberBookings> 0）是否为真（或什至不是）如果我决定在此处放置一些完全不同的文本）

.bookbox{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #FFFFFF;
  margin: 16px !important;
  box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
  flex-wrap: wrap;
}

.bookcard{
  margin-top: 120px !important;
  margin-bottom: 120px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #FFFFFF;
  clear: both;
  width: 100%;
}

.float-left {
  float: left !important;
}

.m-1 {
  margin: 0.25rem !important;
}

<div class="bookbox">
        
            <h3 class="" align="center">
                Hallo {{$user->firstName.' '.$user->lastName}},<br>
                @if($numberBookings > 0)
                    <font color="red">Du hast Buchungen die bereits abgelaufen sind!<br> Bitte gib die Fahrzeuge frei, wenn du sie nicht mehr benötigst</font>
                @else
                    Benötigst du ein Fahrzeug?
                @endif
            </h3>
            <div class="bookcard flex-column">
               <form class="w3-container" method="GET" action="{{config('app.PATH_TO_INDEX', '')}}/findCar">
                   
                   <div class="float-left m-1">
                       <input type="text" name="Standort" list="Standorte" class="w3-input w3-border {{ $errors->has('Standort') ? 'border-danger' : '' }}" placeholder="Standort">
                       <datalist id="Standorte">
                           @foreach($cities as $city)
                               <option value="{!! $city->name !!}"></option>
                           @endforeach
                       </datalist>
                   </div>
                   <div class="float-left m-1">
                       <input type="text" name="Startdatum" class="date w3-input w3-border {{ $errors->has('Startdatum') ? 'border-danger' : '' }}" id="f0date" placeholder="Startdatum">
                   </div>

                   <div class="float-left m-1">
                       <input type="text" name="Enddatum" class="date w3-input w3-border {{ $errors->has('Enddatum') ? 'border-danger' : '' }}" id="f1date" placeholder="Enddatum">
                   </div>
                   <div class="float-left m-1">
                       <button type="submit" class="w3-button margin-small signalButton w3-hover-text-blue w3-blue-grey w3-hover-blue-grey w3-hover-opacity" id="submit0">Fahrzeug finden</button>
                   </div>
               </form>
            </div>
    </div>

Answer 1

您应该在元素上使用position: absolute，以防止其更改元素流：

.container {
  /* I'll be the reference element for aboslutely positioned children */
  position: relative;
  
  /* only for the purpose of this example */
  margin: 5px;
  width: 200px;
  display: inline-block;
}

.pos_absolute {
  position: absolute;
  /* colors only for the purpose of this example */
  white-space: nowrap;
  background: antiquewhite;
}

.top-left {
  top: 0;
  left: 0;
  /* Nicely centered (optionnal) */
  transform: translate(0%, -50%);
}

.top-center {
  top: 0;
  left: 50%;
  /* Nicely centered (optionnal) */
  transform: translate(-50%, -50%);
}

.content {
  background: coral;
  /* Add some padding or margin to make room to display to text above (prevent overlapping) */
  padding-top: .5rem;
}

<div class="container">
  <span class="pos_absolute top-left">I'm at top left</span>
  <div class="content">I'm the block</div>
</div>
<div class="container">
  <span class="pos_absolute top-center">I'm at top center </span>
  <div class="content">I'm an inline-block</div>
</div>

CSS防止div向下移动

1 个答案: