javascript - 如何根据其他 div 对齐我的 div 边距？

问题描述

目前，我很难根据另一个 div 对齐 div

这是我当前的输出。

但是当你缩小屏幕时，我希望它保持不变。

但这给了我这样的东西

对我来说很棘手的原因是导航栏与 divadvanced king air不同

这是导航栏 HTML CSS

 <header>
 <nav class="jet-nav navbar justify-content-between">
<div class="jet-nav-content container">
<a class="navbar-brand" href="{{ url('/') }}">
    <img src="{{ asset('public/images/header/jetaero-logo.png') }}" class="jet-brand" alt="GNF logo">
</a>
<form class="form-inline jet-contact">
    <a href="#" class="circle-icon"><i class="fab fa-facebook"></i></a>
    <a href="#" class="circle-icon"><i class="fab fa-instagram"></i></a>
    <button class="btn btn-primary btn-black" id="callusNav">
        <small><i class="fas fa-phone"></i>&nbsp;&nbsp;619-562-1950</small></button>
 </form>
 </div>
 </nav>
 </header>

CSS

.jet-nav {
background: transparent !important;
width: 100% !important;
}
.jet-nav-content {
margin-left: 15% !important;
margin-right:15% !important;
margin:0 auto !important; 
}

这是中间内容 div

<div class="jet-header">
                            <h2 class="">
                                ADVANCED KING AIR
                                <br>
                                PILOT TRAINING FACILITY
                            </h2>
                            <p class="p-audiowide">
                                THE HIGHEST QUALITY GROUND INSTRUCTION
                                <br>
                                BACKED UP BY ON-SITE SIMULATOR TRAINING
                            </p>
                            <button class="btn btn-primary btn-black margin-right btn-hover">
                                <small><i class="fas fa-phone"></i>&nbsp;CALL US</small>
                            </button>
                            <button class="btn btn-primary btn-black btn-hover">
                                <small><i class="fas fa-envelope"></i>&nbsp;EMAIL US</small>
                            </button>

                            <div class="jet-info">
                                <h6>IMPORTANT NOTICE :</h6>
                                <p>
                                    In response to COVID-19, Jet Aero is taking
                                    precautionary measures to keep all pilots
                                    and staffs safe. All operations are being
                                    conducted with social distancing guidelines
                                    in place by the state of California. Your
                                    training experience will not be
                                    compromised
                                </p>
                            </div>
                        </div>

CSS

.jet-header {
width: auto !important;
}
@media only screen and (min-width: 1399px) {
.jet-header {
    margin-left: 12%;
}
}
@media only screen and (max-width: 1399px) {
.jet-header {
    margin-left: 30px;
}
}

注意：只是Advanced king air我想要做的文本部分。但不是Important Notice

更新尝试了答案，但发生了这种情况

标签： javascripthtmljquerycss

javascript - 如何根据其他 div 对齐我的 div 边距？

问题描述

解决方案

推荐阅读