我試圖在 4 個相互重疊的影像旁邊放置一個小段落。
目前，該段落位于影像下方。
這就是我想要實作的目標：
https://ntchwaidumela-thomas.pixpa.com/architecture/container-society
我試過float了，但文字只是向右移動，但停留在底部。
.column img {
display: block;
padding: 20px;
width: 55%;
height: auto;
}
.column {
margin-left: 70px;
display: inline-block;
margin-bottom: 40px;
}
.para {
display: inline-block;
width: 55%;
font-size: 18px;
line-height: 30px;
letter-spacing: 1px;
text-align: center;
color: rgba(47, 46, 46, 0.70);<div class="row">
<div class="column">
<img id="img1" src="architecture/img1.jpg">
<img id="img2" src="architecture/img2.jpg">
<img id="img3" src="architecture/img3.jpg">
<img id="img4" src="architecture/img4.jpg">
</div>
<div class="para">
<p class="para"> text text text text text text text text text text text text tetx
<br><br> text text text text text text text text text text text text tetx<br><br> text text text text text text text text text text text text tetx</p>
</div>uj5u.com熱心網友回復：
在這種情況下不要使用浮動，因為 flex 甚至更適合使其回應。
.row{
display:flex;
padding: 2rem;
}
::-webkit-scrollbar {
display: none;
}
.Images_section{
width:50vw;
height:100vh;
overflow-y: scroll;
}
.para_section{
width:50vw;
overflow-y: scroll;
line-height:5rem;
height:100vh;
background-color: blue;
}<div class="row">
<div class="Images_section">
<img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80" alt="Img">
<img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80" alt="Img">
<img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80" alt="Img">
<img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80" alt="Img">
</div>
<div class="para_section">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde esse mollitia officiis ex tempore quam deserunt porro aut praesentium reprehenderit. Maiores nulla ea qui animi harum dignissimos doloremque corporis, non modi. Omnis facere reprehenderit assumenda ad illo labore corporis eos suscipit debitis veritatis, itaque laudantium nulla dolorem expedita. Et, eius.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure natus quo ducimus consequatur veniam laborum alias incidunt vero dolorum numquam facere voluptatem assumenda, dolore distinctio maxime nisi eaque reiciendis accusantium sint? A veniam pariatur earum eum eius adipisci harum quia sapiente esse, deleniti accusantium! Natus est esse architecto quasi? Temporibus.
</div>
</div>uj5u.com熱心網友回復：
row上課display:flex和_height:100vh
.row{
display:flex;
height:100vh;
}
.column img {
display: block;
padding: 20px;
width: 80%;
height: auto;
}
.column {
height:100vh;
overflow-y: scroll;
margin-left: 70px;
display: inline-block;
margin-bottom: 40px;
width: 60%;
}
.para {
display: inline-block;
width: 55%;
font-size: 18px;
color: rgba(47, 46, 46, 0.70);
letter-spacing: 3px;
line-height: 60px;
text-align: center;
}<div class="row">
<div class="column">
<img id="img1" src="https://picsum.photos/200">
<img id="img2" src="https://picsum.photos/200">
<img id="img3" src="https://picsum.photos/200">
<img id="img4" src="https://picsum.photos/200">
</div>
<div class="para">
<p class="para"> text text text text text text text text text text text text tetx
<br><br> text text text text text text text text text text text text tetx<br><br> text text text text text text text text text text text text text text text text text text text text text text text text tetx<br><br> text text text text text text text text text text text text text text text text text text text text text text text text tetx</p>
</div>uj5u.com熱心網友回復：
一種方法如下，將 CSS Grid 和 Flex 布局結合起來；解釋性注釋在代碼中：
/* a simple CSS reset, to ensure that all elements have the
same box-sizing, margin, padding and font: */
*,
::before,
::after {
box-sizing: border-box;
font: normal 400 18px / 30px sans-serif;
margin: 0;
padding: 0;
}
/* here we use display: grid to create two equal-width
columns (each of which is 1fr, which is one fraction
of the space available to the grid): */
.row {
display: grid;
grid-template-columns: 1fr 1fr;
/* using logical properties to assign the margin;
margin-block is the block-axis of the document
(top-to-bottom in English/left-to-right languages);
margin-inline is the inline-axis (the axis in which
writing flows, so left-to-right in English): */
margin-block: 1em;
margin-inline: auto;
/* an arbitrary width, adjust to taste: */
width: 90vw;
}
.column {
/* here we use display: flex: */
display: flex;
/* our flex-flow is set to column, so that the images
appear one-above-the-other, top-to-bottom: */
flex-flow: column;
/* we set a 20px gap between adjacent elements: */
gap: 20px;
/* contents are placed horizontally and vertically in
the center of the element; place-content is a short-hand
for 'align-content' and 'justify-content' (applying the
same value - 'center' - to each): */
place-content: center;
}
div.para {
/* to ensure position is calculated against this parent element,
rather than any other ancestor: */
position: relative;
}
p.para {
color: rgba(47, 46, 46, 0.70);
margin-block: 0;
margin-inline: auto;
text-align: center;
width: 90%;
/* to ensure the p.para element(s) are positioned on-screen as the
document is scrolled: */
position: sticky;
/* defining the vertical-position, in relation to the 'top' border
of the element: */
top: 1em;
}<div class="row">
<div class="column">
<img id="img1" src="architecture/img1.jpg">
<img id="img2" src="architecture/img2.jpg">
<img id="img3" src="architecture/img3.jpg">
<img id="img4" src="architecture/img4.jpg">
</div>
<div class="para">
<p class="para"> text text text text text text text text text text text text tetx
<br><br> text text text text text text text text text text text text tetx<br><br> text text text text text text text text text text text text tetx</p>
</div>參考：
display.- CSS 邏輯屬性。
flex-flow.gap.grid-template-columns.position.
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/446933.html