如何将段落放在图像块的右侧？

Question

我正在尝试在 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>

Answer 1

在这种情况下不要使用浮动，因为 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>

Answer 2

一种方法如下，结合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>

参考文献：

Answer 3

使 row class 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>

如何将段落放在图像块的右侧？

How do I place paragraph to the right of a block of images?

css

text

position

image

display