Question

<div class='card'>
<div class='cardleft'><img class='imgcard' src="..." alt='img'></div>
<div class='cardright'>
    <div class='cardtitle'>TITLE</div>
    <div class='cardintro'>lorem ipsum...</div>
</div>
</div>

css

.card{
    display:grid;
    grid-template-columns: 320px auto;
}

.imgcard{
    display:block;
    width:100%;
    margin:0 auto;
}

.cardright{
    overflow:hidden;
}

.cardintro{
    margin-top:9px;
}

有时，cardintro内容（lorem ipsum ...）太长，会改变整个card的高度。

我希望整个card的最大高度为imgcard的高度（未固定），并防止cardintro文字溢出该卡的高度。

我认为这可以通过javascript解决，但我希望grid-template-rows或以某种方式使用css。

任何帮助？

Answer 1

您可以使用包含cardintro的cardright div的绝对定位并设置卡上隐藏的溢出。这是一张在三张卡上都有相同数量文字的片段，这些卡片都有不同的图像高度。

＆＃13;

.card {
  display: block;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}

.imgcard {
  display: block;
  width: 100%;
  margin: 0 auto;
}

.cardright {
  position: absolute;
  left: 330px;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
}

.cardleft {
  display: inline-block;
  width: 320px;
}

.cardintro {
  margin-top: 9px;
}

＆＃13;

<div class='card'>
  <div class='cardleft'><img class='imgcard' src="http://via.placeholder.com/320x150" alt='img'></div>
  <div class='cardright'>
    <div class='cardtitle'>TITLE</div>
    <div class='cardintro'>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum metus vitae elit pellentesque pellentesque. Donec vulputate, mi fringilla mattis tincidunt, tellus metus placerat orci, sit amet tincidunt nisl nulla ultrices leo. Duis vitae
        porttitor tortor, et imperdiet orci. In eget laoreet turpis, a porttitor metus. Aliquam vitae volutpat mi. Curabitur pellentesque arcu ex, sit amet efficitur ligula porta in. Cras metus justo, eleifend vitae ante non, congue commodo risus. In
        hac habitasse platea dictumst. Proin cursus at nulla sed pretium. Maecenas semper nibh ut velit interdum varius. Sed tempus mi sit amet pellentesque rutrum. Phasellus placerat id ipsum quis tempor.</p>
      <p>Curabitur est ex, rutrum vel lacus eu, imperdiet dapibus libero. Donec cursus mattis finibus. Cras eget felis et orci consectetur egestas sit amet sed sem. Phasellus ultricies mi eu mauris posuere, sit amet facilisis ante lobortis. Etiam et quam
        id sapien gravida lacinia ut non diam. Etiam sit amet iaculis quam, in malesuada erat. Aliquam tristique aliquet elit, vitae maximus enim vestibulum non. Phasellus vitae iaculis orci. Integer in consequat odio, at dapibus quam.</p>
    </div>
  </div>
</div>

<div class='card'>
  <div class='cardleft'><img class='imgcard' src="http://via.placeholder.com/320x250" alt='img'></div>
  <div class='cardright'>
    <div class='cardtitle'>TITLE</div>
    <div class='cardintro'>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum metus vitae elit pellentesque pellentesque. Donec vulputate, mi fringilla mattis tincidunt, tellus metus placerat orci, sit amet tincidunt nisl nulla ultrices leo. Duis vitae
        porttitor tortor, et imperdiet orci. In eget laoreet turpis, a porttitor metus. Aliquam vitae volutpat mi. Curabitur pellentesque arcu ex, sit amet efficitur ligula porta in. Cras metus justo, eleifend vitae ante non, congue commodo risus. In
        hac habitasse platea dictumst. Proin cursus at nulla sed pretium. Maecenas semper nibh ut velit interdum varius. Sed tempus mi sit amet pellentesque rutrum. Phasellus placerat id ipsum quis tempor.</p>
      <p>Curabitur est ex, rutrum vel lacus eu, imperdiet dapibus libero. Donec cursus mattis finibus. Cras eget felis et orci consectetur egestas sit amet sed sem. Phasellus ultricies mi eu mauris posuere, sit amet facilisis ante lobortis. Etiam et quam
        id sapien gravida lacinia ut non diam. Etiam sit amet iaculis quam, in malesuada erat. Aliquam tristique aliquet elit, vitae maximus enim vestibulum non. Phasellus vitae iaculis orci. Integer in consequat odio, at dapibus quam.</p>
    </div>
  </div>
</div>

<div class='card'>
  <div class='cardleft'><img class='imgcard' src="http://via.placeholder.com/320x350" alt='img'></div>
  <div class='cardright'>
    <div class='cardtitle'>TITLE</div>
    <div class='cardintro'>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum metus vitae elit pellentesque pellentesque. Donec vulputate, mi fringilla mattis tincidunt, tellus metus placerat orci, sit amet tincidunt nisl nulla ultrices leo. Duis vitae
        porttitor tortor, et imperdiet orci. In eget laoreet turpis, a porttitor metus. Aliquam vitae volutpat mi. Curabitur pellentesque arcu ex, sit amet efficitur ligula porta in. Cras metus justo, eleifend vitae ante non, congue commodo risus. In
        hac habitasse platea dictumst. Proin cursus at nulla sed pretium. Maecenas semper nibh ut velit interdum varius. Sed tempus mi sit amet pellentesque rutrum. Phasellus placerat id ipsum quis tempor.</p>
      <p>Curabitur est ex, rutrum vel lacus eu, imperdiet dapibus libero. Donec cursus mattis finibus. Cras eget felis et orci consectetur egestas sit amet sed sem. Phasellus ultricies mi eu mauris posuere, sit amet facilisis ante lobortis. Etiam et quam
        id sapien gravida lacinia ut non diam. Etiam sit amet iaculis quam, in malesuada erat. Aliquam tristique aliquet elit, vitae maximus enim vestibulum non. Phasellus vitae iaculis orci. Integer in consequat odio, at dapibus quam.</p>
    </div>
  </div>
</div>

＆＃13;

css网格 - 防止右侧文本溢出

1 个答案: