需要保持影像和文本之間的固定間隙。
如何實作這一目標？
我嘗試將 img 和 text 絕對定位，但設定了百分比寬度，兩者之間的差距不會保持不變。我認為這是一個非常常見的問題，但似乎在堆疊溢位或類似問題上找不到任何其他內容
uj5u.com熱心網友回復：
如果我理解正確的話。
您的元素需要放在一個容器中，您可以使用邊距來設定每個元素之間的間隙。
例如，在 flex 容器中，您可以 flex-grow:1在子元素上使用所有空間并為元素設定邊距。
uj5u.com熱心網友回復：
可能有很多方法可以做到。這可能對您有用，因為內容通常設定了一些最大寬度：
* {
box-sizing: border-box;
}
body {
margin: 0;
background-color: yellow;
}
.container {
width: 80%;
margin: 0 auto;
background-color: white;
}
.strech {
padding: 20px 0 0;
display: flex;
flex-wrap: wrap;
}
.text {
flex-basis: 50%;
margin-bottom: 20px;
background-color: green;
}
.image {
flex-basis: 50%;
margin-bottom: 20px;
position: relative;
}
.image img {
object-fit: cover;
margin-left: calc(100% - 50vw);
display: block;
width: calc(50vw - 20px);
}
.text .image img {
margin-left: 20px;
margin-right: calc(100% - 50vw);
}<div class="container">
<div class="strech">
<div class="image"><img src="https://picsum.photos/250/100" /></div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="image"><img src="https://picsum.photos/250/100" /></div>
</div>
</div>在全屏或JSFiddle上檢查它。
uj5u.com熱心網友回復：
一個好的解決方案是為此使用 CSS 網格。希望我的代碼是不言自明的。但是，如果您需要解釋，請在回復中告訴我，我會編輯答案并寫出解釋。
.wrapper-column {
width: 100%;
display: flex;
flex-direction: column;
}
.inner-container {
width: 100%;
display: flex;
justify-content: flex-end;
}
.inner-container:first-of-type {
justify-content: flex-start;
}
.container {
width: 80%;
/* Either use relative width or subtract fixed width */
/* width: calc(100% - 17rem); */
height: 5rem;
display: grid;
column-gap: 2rem;
margin-bottom: 2rem;
}
.container-1 {
grid-template-columns: 1.5fr 1fr;
}
.container-2 {
grid-template-columns: 1fr 1.5fr;
}
.Item {
display: grid;
place-content: center;
color: #ffffff;
font-size: 2rem;
font-weight: bold;
}
.Img {
background: #066BCB;
}
.Text {
background: #00CF62;
}<div class="wrapper-column">
<div class="inner-container">
<div class="container container-1">
<div class="Item Img">Img</div>
<div class="Item Text">Text</div>
</div>
</div>
<div class="inner-container">
<div class="container container-2">
<div class="Item Text">Text</div>
<div class="Item Img">Img</div>
</div>
</div>
<div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/351573.html
下一篇：使用上一個/下一個按鈕導航div