色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

對齊不同塊的子元素

CSS
洪振霞2年前7瀏覽0評論

我有一份商品清單。我需要在二維列表中顯示它們。每個商品都有子元素:照片、標題、描述、價格和購買按鈕，它們的大小和位置必須是這樣的:一個商品行中的所有標題、描述、價格和照片必須在同一y坐標位置，并且其高度是一行中相應高度元素的最大值。

我試過這個:“網(wǎng)格-模板-行:1fr 1fr 1fr 30px為了使一行中的所有子元素都在相同的y位置，但我需要它們的高度適合內(nèi)容，并且不高于一行中的最大元素。 附注:你可以使用flex或任何你想要的東西來提供代碼。

密碼

.Grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat( auto-fill, 280px);
}

.loon-card {
  grid-template-rows: 1fr 1fr 1fr 1fr 30px;
  display: grid;
  grid-gap: 10px;
  border: 1px solid #ddd;
  padding: 10px;
}

.long-description {
  border-top: 1px solid #ddd;
}

<div class="Grid">

  <div class="loon-card">
    <img src="">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class='price'>12.00$</div>
    <button>buy</button>
  </div>

  <div class="loon-card">
    <img src="">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
      <br/>Title:5
      <br/>Title:6
      <br/>Title:7
      <br/>Title:8
      <br/>Title:9
      <br/>Title:10
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
      <br/>Title:5
      <br/>Title:6
      <br/>Title:7
      <br/>Title:8
      <br/>Title:9
      <br/>Title:10

    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class='price'>12.00$</div>
    <button>buy</button>
  </div>

  <div class="loon-card">
    <img src="">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class='price'>14.00$</div>
    <button>buy</button>
  </div>

  <div class="loon-card">
    <img src="">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class='price'>15.00$</div>
    <button>buy</button>
  </div>

</div>

這是目前(2019/06)*任何CSS布局方法都無法做到的。

顯示:子網(wǎng)格解決了這個問題，但是目前為止，瀏覽器對它的非實驗性采用還很有限。*

*[2019/12更新] -火狐71現(xiàn)已推出子網(wǎng)格

支持@ CanIuse.com

-

默認情況下，在Firefox 71+中它是啟用的，因此可以進行測試。在完全采用之前，需要使用Javacript來均衡元件高度。

Rachel Andrew(CSS-Grid環(huán)境專家)的一些資源鏈接

https://rachelandrew . co . uk/archives/2019/04/16/CSS-sub grid-news-and-demos/ 和

子網(wǎng)格上的YouTube視頻

另一個

* {   margin: 0;   padding: 0;   box-sizing: border-box; }  ::before, ::after {   box-sizing:inherit; }

.Grid {
  display: grid;
  width:90%;
  margin:auto;
  grid-gap: 10px;
  grid-template-columns: repeat( auto-fill, 280px);
}

.loon-card {
  display:grid;
  grid-row: span 5; /* as we have 5 card components in each card */
  grid-template-rows:subgrid;
  border: 1px solid #ddd;
  padding: 10px;
}

.long-description {
  border-top: 1px solid #ddd;
}

.price {
padding:.5em;
text-align:center;
}

img {
  max-width:100%;
  display: block;
}

<div class="Grid">

  <div class="loon-card">
    <img src="http://www.fillmurray.com/300/200">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class='price'>12.00$</div>
    <button>buy</button>
  </div>

  <div class="loon-card">
    <img src="http://www.fillmurray.com/300/200">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
      <br/>Title:5
      <br/>Title:6

    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class='price'>12.00$</div>
    <button>buy</button>
  </div>

  <div class="loon-card">
    <img src="http://www.fillmurray.com/300/200">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class='price'>14.00$</div>
    <button>buy</button>
  </div>

  <div class="loon-card">
    <img src="http://www.fillmurray.com/300/200">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class='price'>15.00$</div>
    <button>buy</button>
  </div>

</div>

可以說，即使沒有子網(wǎng)格，你也可以達到同樣的效果，盡管這有點麻煩。

在我的例子中，我沒有改變HTML，所以我使用display: contents將孩子帶到DOM樹的上一層。但是如果你可以改變你的標記，并且不介意由此產(chǎn)生的混亂，你也可以在沒有顯示內(nèi)容的情況下實現(xiàn)這一點。

.Grid {
    display: grid;
    grid-gap: 10px;
}
.loon-card {
    display: contents;
}
img {
    width: 100%;
    grid-row-start: 1;
}
.short-description {
    grid-row-start: 2;
}
.long-description {
    grid-row-start: 3;
}
.price {
    grid-row-start: 4;
}
button {
    grid-row-start: 5;
}

<div class="Grid">

	<div class="loon-card">
		<img src="http://www.fillmurray.com/300/200">
		<div class="short-description">
			Title:1
			<br />Title:2
			<br />Title:3
			<br />Title:4
		</div>
		<div class="long-description">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla
			scelerisque egestas.
		</div>
		<div class='price'>12.00$</div>
		<button>buy</button>
	</div>

	<div class="loon-card">
		<img src="http://www.fillmurray.com/300/200">
		<div class="short-description">
			Title:1
			<br />Title:2
			<br />Title:3
			<br />Title:4
			<br />Title:5
			<br />Title:6

		</div>
		<div class="long-description">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla
			scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec
			et lorem ac nulla scelerisque egestas.
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla
			scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec
			et lorem ac nulla scelerisque egestas.
		</div>
		<div class='price'>12.00$</div>
		<button>buy</button>
	</div>

	<div class="loon-card">
		<img src="http://www.fillmurray.com/300/200">
		<div class="short-description">
			Title:1
			<br />Title:2
			<br />Title:3
			<br />Title:4
		</div>
		<div class="long-description">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla
			scelerisque egestas.
		</div>
		<div class='price'>14.00$</div>
		<button>buy</button>
	</div>

	<div class="loon-card">
		<img src="http://www.fillmurray.com/300/200">
		<div class="short-description">
			Title:1
			<br />Title:2
			<br />Title:3
			<br />Title:4
		</div>
		<div class="long-description">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla
			scelerisque egestas.
		</div>
		<div class='price'>15.00$</div>
		<button>buy</button>
	</div>
</div>

一點點JavaScript可以幫上忙。通過獲取最大高度，您可以將其定義給所有類

function textHeight() {
  var reed = document.getElementsByClassName("titles")

  let lengths = Array.from(reed).map(e => e.offsetHeight);
  let max = Math.max(...lengths);

  for (let i = 0; i < reed.length; i++) {
    reed[i].style.minHeight = max + "px"
  }
}
textHeight();

.kind-words {
  margin-top: 3%;
  margin-left: 10%;
  margin-right: 10%;
  display: flex;
}

.word {
  background-color: #F5F5F5;
  float: left;
  width: 50%;
  margin-left: 1%;
  margin-right: 1%;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 3%;
  padding-bottom: 3%;
  border: solid 1px #B1976B;
  display: flex;
  flex-flow: column;
}

<div class="kind-words" style="margin-bottom: 4%;">
  <div class="word">
    <h1 style="text-align: center; font-family: avenirNext; font-size: 30px; color: #B1976B;">Mark D. Griffith</h1>
    <h1 style="text-align: center; font-family: avenirNext; font-size: 20px; color: #B1976B;" class="titles">Griffith & Associates</h1>
    <h1 style="text-align: center; text-align:justify;  font-family: avenirnext; font-size: 20px; line-height: 1.5em; color: #54595F;">I would not try any level criminal allegation regarding sexual assault without the help of Dr. Pierce. I have tried many of these cases and the most valuable asset when I do is Dr. Pierce. He has testified in many of my cases with the outcome being
      the two word verdict my client so badly needs. The most clear and concise witness I have ever used. I have come to the point where I feel the only way to be truly effective is to have him on our team when we go to trial. He is approachable, understanding,
      and infinitely knowledgeable.
    </h1>
  </div>
  <div class="word">
    <h1 style="text-align: center; font-family: avenirNext; font-size: 30px; color: #B1976B;">Katheryn H. Haywood
    </h1>
    <h1 style="text-align: center;  font-family: avenirNext; font-size: 20px; color: #B1976B;" class="titles">The Law Office of<br> Katheryn H. Haywood, PLLC </h1>
    <h1 style="text-align: center;  text-align:justify; font-family: avenirnext; font-size: 20px; line-height: 1.5em; color: #54595F;">Dr. Pierce is my ONLY expert for child abuse cases. He is a national leader in understanding false accusations based on fear of the boogey man/family dynamics/hyper-sensitivity to touching based on past trauma. I have been doing sex defense work for
      20 years. Dr. Pierce is the expert I rely on to help me understand the intricacies of my cases. He is a straight shooter. And perhaps more importantly, he speaks very well to juries in common language which is clear, concise, and not elitist. I
      have 5 cases pending with Dr. Pierce and have yet to lose one where he has consulted/testified.
    </h1>
  </div>
</div>