html - 多行中的多个 div，但在同一位置

Question

我需要制作多个 div，但它们必须位于同一行的同一位置。我真的不知道用英语怎么说。这是我真正需要的，所以我的意思是我需要这个:

X     X
X     X
X

但目前我有这个:

X  x
 X  x
  X

我的代码:

.buy-one {
    		-moz-column-count: 2;
      		-webkit-column-count: 2;
      		column-count: 2;
    	}
    
    	.buy-text {
    		display: inline-block;
    		font-family: 'Open Sans', sans-serif;
    		font-size: 14px;
    		font-weight: 600;
    	}
    	
    	.buy-img {
    		display: inline-block;
    		vertical-align: middle;
    	}

  <div class="buy">
       				<div class="buy-one" style="display:block;">
       					<div style="display: block; clear: both;">
       						<img class="buy-img" src="" alt="zdjecie">
       						<p class="buy-text">xyz.</p>
    					</div>
                        <div style="display: block; clear: both;">
       						<img class="buy-img" src="" alt="zdjecie">
       						<p class="buy-text">xyz.</p>
    					</div>
                       <div style="display: block; clear: both;">
       						<img class="buy-img" src="" alt="zdjecie">
       						<p class="buy-text">xyz.</p>
    					</div>
       				</div>
       			</div>

    

Answer 1

来自以上评论的交叉发布:

.buy-item {
  /* just for better visibility */
  border: 2px solid lightgreen;
  box-sizing: border-box;
}

.buy-one {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.buy-item {
  flex: 0 0 50%;
}

    .buy-text {
        display: inline-block;
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
        font-weight: 600;
    }

    .buy-img {
        display: inline-block;
        vertical-align: middle;
    }

<div class="buy">
                <div class="buy-one">
                    <div class="buy-item">
                        <img class="buy-img" src="" alt="zdjecie">
                        <p class="buy-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod ligula sit amet ex imperdiet, vitae ullamcorper eros volutpat. Aenean vehicula vestibulum sapien, quis finibus orci malesuada et. Cras sodales bibendum neque, vitae volutpat odio feugiat ac. Nulla aliquam enim maximus ligula vehicula congue. In faucibus mollis semper. Nunc sed scelerisque mi, quis cursus arcu. Fusce sed sem sed quam eleifend commodo id eget lorem. Nullam tristique tellus ac sapien ultrices, porttitor volutpat est consequat. </p>
                    </div>
                    <div class="buy-item">
                        <img class="buy-img" src="" alt="zdjecie">
                        <p class="buy-text">xyz.</p>
                    </div>
                   <div class="buy-item">
                        <img class="buy-img" src="" alt="zdjecie">
                        <p class="buy-text">xyz.</p>
                    </div>
                   <div class="buy-item">
                        <img class="buy-img" src="" alt="zdjecie">
                        <p class="buy-text">Nullam id justo congue, luctus nulla a, tempus sapien. Cras ante felis, fringilla at interdum nec, euismod nec ante. In hac habitasse platea dictumst. Donec non tortor quis diam convallis aliquet. Proin feugiat, nisi id accumsan feugiat, libero neque porttitor sapien, sed porta nunc purus vel nibh. Donec in est enim. In ac mauris ligula. Morbi urna nunc, malesuada quis interdum nec, congue non turpis. Nam tincidunt nibh diam, quis vulputate mi bibendum eget. Duis eu finibus nibh. Praesent placerat ut nunc id rutrum. Vestibulum at bibendum eros. Morbi tellus turpis, accumsan a facilisis at, accumsan vitae nulla. Aliquam malesuada placerat consectetur.</p>
                    </div>
                   <div class="buy-item">
                        <img class="buy-img" src="" alt="zdjecie">
                        <p class="buy-text">xyz.</p>
                    </div>
                </div>
            </div>