javascript - CSS防止div向下移动
问题描述
我的 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>
解决方案
您应该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>
推荐阅读
- html - 构建后未找到 Angular 11 资产
- c# - Entity Framework 6 可以从分隔字符串列映射外键吗?
- asynchronous - 暂时挂起或停用 futures::select 中使用的间隔流
- c - 如何禁止编译器预先计算常量值的乘积
- ansible - 如何使用 json_query 过滤器提取所有项目等于一个值
- sql - Teradata 中的多语句请求与分隔插入
- javascript - 为什么我的 addEventListener 函数在本地为变量赋值,而不是全局?
- ansible - Ansible 循环项目列表并将项目作为变量传递给具有“何时”条件的“包含”任务
- c# - BouncyCastle AES 密钥包装 - 8 字节的倍数错误
- c# - 在 Unity 中堆叠图像