CSS-具有相同高度，但图像高度不同的Divs [英] CSS - Divs with same height, but different image heights

问题描述

是否有可能具有相同高度的div，其中包含不同高度的图像?我不能使用 height css属性，因为我不知道高度.

  * {框大小:border-box；}.magazine-items {宽度:500像素；显示:flex;flex-flow:行换行;}.magazine-item {宽度:33％;显示:网格；网格模板区域:图像图像图像"文字文字文字"；边框:1px纯红色；align-content:flex-start;}.magazine-item img {宽度:100％;}.文本{网格区域:文本；}.img {网格区域:图像；}.double-text {宽度:80％;保证金:自动;}  

 < div class ="magazine-items">< div class ="magazine-item">< div class ="img">< img src ="https://upload.wikimedia.org/wikipedia/commons/b/b7/800px-Islas_Coronado.cc.jpg" alt ="></div>< div class ="text">< p>PorovnánídetailůdesignusérieElle a Effe</p></div></div>< div class ="magazine-item">< div class ="img">< img src ="https://www.onlinekoupelny.cz/image/catalog/magazin/Level_small.jpg" alt ="></div>< div class ="text">< p>Vyváženélinie s citem promaximálnífunkčnost，zaoblenétvary anadčasová雅致的činízřadyLevel jednu znejoblíbenějšíchsériíznačkyPaffoni.VyváženéLINIE小号CITEM亲maximálnífunkčnost，zaoblenétvary一个nadčasová优雅CINIŽRADY等级jednuŽnejoblíbenějšíchsériíznačkyPaffoni.VyváženéLINIE小号CITEM亲maximálnífunkčnost，zaoblenétvary一个nadčasová优雅CINIŽRADY等级jednuŽnejoblíbenějšíchsériíznačkyPaffoni<./p></div></div>< div class ="magazine-item">< div class ="img">< img src ="https://dummyimage.com/600x400/000/fff" alt ="></div>< div class ="text">< p>Vyváženélinie s citem promaximálnífunkčnost，zaoblenétvary anadčasová雅致činízřadyLevel jednu znejoblíbenějšíchsériíznačkyPaffoni.</div></div></div>  

这是我设法使用 flexbox 和 grid 进行的操作，但是它仍然不知道如何在不知道图像大小的情况下为div设置相同的高度./p>

有什么想法吗?谢谢

这是我的期望: Edit2 :我重新提出我的问题.不使用javascript或固定高度，是否有机会获得图片中的div?

解决方案

  .captions {宽度:33％;边框:实心1px；}img {最大宽度:100％；}.wrapper {显示:flex;宽度:100％;}@media(最小宽度:780px){.wrapper {最大宽度:780px；}}.d-flex {显示:flex;}  

 < body>< div class ="wrapper">< div class ="captions">< img src ="https://upload.wikimedia.org/wikipedia/commons/b/b7/800px-Islas_Coronado.cc.jpg" alt ="></div>< div class ="captions">< img src ="https://www.onlinekoupelny.cz/image/catalog/magazin/Level_small.jpg" alt ="></div>< div class ="captions">< img src ="https://dummyimage.com/600x400/000/fff" alt ="></div></div>< div class ="wrapper">< div class ="captions">< p>这是针对Div 1</p></div>< div class ="captions">< p>这是针对Div 2</p></div>< div class ="captions">< p>这是针对Div 3</p></div></div></body>  

Is there any possibility to have divs with same heights, which contains images with different heights? I cannot use height css attribute, because I don't know the heights.

* {
  box-sizing: border-box;
}

.magazine-items {
  width: 500px;
  display:flex;
  flex-flow:row wrap;
}

.magazine-item {
  width:33%;
  display: grid;
  grid-template-areas: "image image image"
                       "text text text";
  border: 1px solid red;
  align-content: flex-start;
}
.magazine-item img {
  width:100%;
}
.text{
  grid-area: text;
}
.img {
  grid-area: image;
}
.double-text {
  width:80%;
  margin:auto;
}

<div class="magazine-items">
	<div class="magazine-item">
		<div class="img">
			<img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/800px-Islas_Coronado.cc.jpg" alt="">
		</div>	
		<div class="text">
			<p>Porovnání detailů designu série Elle a Effe</p>
		</div>
	</div>
	<div class="magazine-item">
		<div class="img">
			<img src="https://www.onlinekoupelny.cz/image/catalog/magazin/Level_small.jpg" alt="">
		</div>
		<div class="text">
			<p>Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.
			Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.</p>
		</div>
	</div>
	  <div class="magazine-item">
    <div class="img">
      <img src="https://dummyimage.com/600x400/000/fff" alt="">
    </div>	
    <div class="text">
      <p>Vyvážené linie s citem pro maximální funkčnost, zaoblené tvary a nadčasová elegance činí z řady Level jednu z nejoblíbenějších sérií značky Paffoni.</p>
    </div>
  </div>
</div>

This is what I managed to do with flexbox and grid but it still don't know how to set same height for divs without knowing the size of images.

Any ideas? Thank you

Edit: This is my expectation: Edit2: I reformulate my question. Is there any chance to get the divs like in the picture without using javascript or fixed height?

解决方案

.captions {
  width: 33%;
  border: solid 1px;
}

img {
  max-width: 100%;
}

.wrapper {
  display: flex;
  width: 100%;
}

@media (min-width: 780px) {
  .wrapper {
    max-width: 780px;
  }
}
.d-flex {
  display: flex;
}

<body>
  <div class="wrapper">
    <div class="captions">
      <img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/800px-Islas_Coronado.cc.jpg" alt="">
    </div>
    <div class="captions">
      <img src="https://www.onlinekoupelny.cz/image/catalog/magazin/Level_small.jpg" alt="">
    </div>
    <div class="captions">
      <img src="https://dummyimage.com/600x400/000/fff" alt="">
    </div>
  </div>
  <div class="wrapper">
    <div class="captions">
      <p> This is for Div 1 </p>
    </div>
    <div class="captions">
      <p> This is for Div 2 </p>
    </div>
    <div class="captions">
      <p> This is for Div 3 </p>
    </div>
  </div>
</body>

这篇关于CSS-具有相同高度，但图像高度不同的Divs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！