我正在嘗試創建一個具有絕對定位元素的布局，如下所示：
如您所見，元素重疊且未正確清除。也許有一個非常簡單的修復，但我一直無法弄清楚如何解決這個問題。
.main-block .main-wrapper {
margin-bottom: 4rem;
}
.main-block .main-wrapper:nth-child(odd) .main-box {
height: 100%;
}
.main-block .main-wrapper:nth-child(odd) .main-box .image-container {
width: 440px;
}
.main-block .main-wrapper:nth-child(odd) .main-box .text-container {
background-color: #8EFFFF;
position: absolute;
width: 720px;
top: 3rem;
z-index: -1;
right: 15px;
padding: 4em 5em;
}
.main-block .main-wrapper:nth-child(even) .main-box {
height: 100%;
}
.main-block .main-wrapper:nth-child(even) .main-box .image-container {
width: 440px;
position: absolute;
right: 15px;
}
.main-block .main-wrapper:nth-child(even) .main-box .text-container {
background-color: #8EFFFF;
position: relative;
width: 720px;
z-index: -1;
padding: 4em 5em;
top: 3rem;
}<body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<main role="main" id="content" class="site-content">
<section class="py-5 main-block">
<div class="container">
<div class="row">
<div class="col-lg">
<h2 class="text-blue-dark mb-5">Cursus euismod quis</h2>
</div>
</div>
<div class="row">
<div class="col-lg-12 main-wrapper">
<div class="main-box">
<div class="image-container"><img src="https://dummyimage.com/440x440/6b59b3/fff"></div>
<div class="text-container">
<h5 class="font-weight-bold">Lorem ipsum dolor sit amet</h5>
<div class="blurb mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Dui id ornare arcu odio ut sem nulla pharetra. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Sit amet aliquam id diam maecenas ultricies mi eget. Pellentesque dignissim enim sit amet. Mollis nunc sed id semper. Integer
malesuada nunc vel risus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Nisi est sit amet facilisis magna etiam tempor orci. Nulla facilisi cras fermentum odio eu. At quis risus sed vulputate odio ut enim blandit. Ipsum
suspendisse ultrices gravida dictum fusce ut. Facilisi cras fermentum odio eu feugiat. Vestibulum rhoncus est pellentesque elit ullamcorper. Et malesuada fames ac turpis egestas sed tempus urna et. Scelerisque purus semper eget duis
at tellus at urna condimentum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.p>
</div>
</div>
</div>
</div>
<div class="col-lg-12 main-wrapper">
<div class="main-box">
<div class="image-container"><img src="https://dummyimage.com/440x440/76b359/fff"></div>
<div class="text-container">
<h5 class="font-weight-bold">Sit amet aliquam</h5>
<div class="blurb mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Dui id ornare arcu odio ut sem nulla pharetra. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Sit amet aliquam id diam maecenas ultricies mi eget. Pellentesque dignissim enim sit amet. Mollis nunc sed id semper. Integer
malesuada nunc vel risus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Nisi est sit amet facilisis magna etiam tempor orci. Nulla facilisi cras fermentum odio eu. At quis risus sed vulputate odio ut enim blandit. Ipsum
suspendisse ultrices gravida dictum fusce ut. Facilisi cras fermentum odio eu feugiat. Vestibulum rhoncus est pellentesque elit ullamcorper. Et malesuada fames ac turpis egestas sed tempus urna et. Scelerisque purus semper eget duis
at tellus at urna condimentum.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</body>uj5u.com熱心網友回復：
這里不需要絕對定位。對于復雜的布局來說，這可能是一個真正的痛苦。我會使用傳統的 Bootstrap 列，并以負邊距稍微移動一些東西。
.main-block .main-wrapper {
margin-top: 3rem;
}
.main-block .image-container {
width: calc(100% 2rem);
}
.main-block .main-wrapper:nth-child(odd) .image-container {
margin-left: -2rem;
}
.main-block .image-container img {
margin-top: -2rem;
}
.main-block .main-wrapper .text-container {
background-color: #8EFFFF;
padding: 4rem 5rem;
z-index: -1;
}
.main-block .main-wrapper:nth-child(odd) .text-container {
margin-right: -2rem;
}
.main-block .main-wrapper:nth-child(even) .text-container {
margin-left: -2rem;
}<body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<main role="main" id="content" class="site-content">
<section class="container py-5 main-block">
<div class="row">
<div class="col">
<h2 class="text-blue-dark mb-5">Cursus euismod quis</h2>
</div>
</div>
<div class="row main-wrapper">
<div class="col-4">
<div class="image-container">
<img class="img-fluid" src="https://dummyimage.com/440x440/6b59b3/fff">
</div>
</div>
<div class="col-8 text-container">
<h5 class="font-weight-bold">Lorem ipsum dolor sit amet</h5>
<div class="blurb mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Dui id ornare arcu odio ut sem nulla pharetra. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Sit amet aliquam id diam maecenas ultricies mi eget. Pellentesque dignissim enim sit amet. Mollis nunc sed id semper. Integer malesuada
nunc vel risus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Nisi est sit amet facilisis magna etiam tempor orci. Nulla facilisi cras fermentum odio eu. At quis risus sed vulputate odio ut enim blandit. Ipsum suspendisse
ultrices gravida dictum fusce ut. Facilisi cras fermentum odio eu feugiat. Vestibulum rhoncus est pellentesque elit ullamcorper. Et malesuada fames ac turpis egestas sed tempus urna et. Scelerisque purus semper eget duis at tellus at urna
condimentum.
</p>
</div>
</div>
</div>
<div class="row main-wrapper">
<div class="col-8 text-container">
<h5 class="font-weight-bold">Sit amet aliquam</h5>
<div class="blurb mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Dui id ornare arcu odio ut sem nulla pharetra. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Sit amet aliquam id diam maecenas ultricies mi eget. Pellentesque dignissim enim sit amet. Mollis nunc sed id semper. Integer malesuada
nunc vel risus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Nisi est sit amet facilisis magna etiam tempor orci. Nulla facilisi cras fermentum odio eu. At quis risus sed vulputate odio ut enim blandit. Ipsum suspendisse
ultrices gravida dictum fusce ut. Facilisi cras fermentum odio eu feugiat. Vestibulum rhoncus est pellentesque elit ullamcorper. Et malesuada fames ac turpis egestas sed tempus urna et. Scelerisque purus semper eget duis at tellus at urna
condimentum.
</p>
</div>
</div>
<div class="col-4">
<div class="image-container">
<img class="img-fluid" src="https://dummyimage.com/440x440/76b359/fff">
</div>
</div>
</div>
</section>
</main>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/464175.html
上一篇：在Angular中上傳圖片