CSS 防止 div 向下移动

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>