0

我正在尝试使用带有标题的 HTML 卡片，右侧的图像和左侧的项目符号列表。但是，项目符号列表超出了卡片。如何使卡片的 div 适应其内容的长度？

这是代码：

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  padding: 20px;
  width: 100%;
}


/* On mouse-over, add a deeper shadow */

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.card_excerpt {
  float: right;
  width: 50%;
}

.card_image {
  width: 40%;
}
<div class="card">
  <h3><b>CARD TITLE</b></h3>
  <div class="card_excerpt">
    <ul>
      <li> Bullet 1</li>
      <li> Bullet 2</li>
      <li> Bullet 3</li>
      <li> Bullet 4</li>
      <li> Bullet 5</li>
      <li> Bullet 6</li>
      <li> Bullet 7</li>
    </ul>
  </div>
  <div class="card_image"> <img src="some img" /> </div>
</div>

结果： 在此处输入图像描述

4

4 回答 4

1

您可以添加clear:both到.card_image

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  padding: 20px;
  width: 100%;
}


/* On mouse-over, add a deeper shadow */

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.card_excerpt {
  float: right;
  width: 50%;
}

.card_image {
  width: 40%;
  clear:both;
}
<div class="card">
  <h3><b>CARD TITLE</b></h3>
  <div class="card_excerpt">
    <ul>
      <li> Bullet 1</li>
      <li> Bullet 2</li>
      <li> Bullet 3</li>
      <li> Bullet 4</li>
      <li> Bullet 5</li>
      <li> Bullet 6</li>
      <li> Bullet 7</li>
    </ul>
  </div>
  <div class="card_image"> <img src="some img" /> </div>
</div>

于 2020-07-20T13:31:42.870 回答
1

使用 flexbox 可以轻松完成，无需修改 HTML

.card {
      /* Add shadows to create the "card" effect */
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      transition: 0.3s;
      padding: 20px;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
    }

    /* On mouse-over, add a deeper shadow */
    .card:hover {
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }

    .card>h3 {
      flex: 1 0 100%;
    }

    .card_excerpt {
      flex: 1 1 50%;
    }

    .card_image {
      flex: 1 1 40%;
    }
<div class="card">
    <h3><b>CARD TITLE</b></h3>
    <div class="card_excerpt">
      <ul>
        <li> Bullet 1</li>
        <li> Bullet 2</li>
        <li> Bullet 3</li>
        <li> Bullet 4</li>
        <li> Bullet 5</li>
        <li> Bullet 6</li>
        <li> Bullet 7</li>
      </ul>
    </div>
    <div class="card_image"> <img src="https://picsum.photos/150/150" /> </div>
  </div>

于 2020-07-20T13:39:57.363 回答
0

Also, if you can modify a it your card structure, you could make use of flexbox instead of float to position your contents.

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  padding: 20px;
  width: 100%;
}

.card_inner {
 display:flex;
}

img {
  width: 100%;
  height: auto;
}

/* On mouse-over, add a deeper shadow */

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.card_excerpt {
  // float: right; // no need
  width: 50%;
}

.card_image {
  width: 40%;
  clear:both;
}
<div class="card">
  <h3><b>CARD TITLE</b></h3>
  <div class="card_inner">
    <div class="card_image"> <img src="http://placekitten.com/600/600" /> </div>
    <div class="card_excerpt">
      <ul>
        <li> Bullet 1</li>
        <li> Bullet 2</li>
        <li> Bullet 3</li>
        <li> Bullet 4</li>
        <li> Bullet 5</li>
        <li> Bullet 6</li>
        <li> Bullet 7</li>
      </ul>
    </div>
  </div>
</div>

于 2020-07-20T13:36:42.853 回答
0

尝试这个..

.css

.card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    padding:20px;
    width:100%;
  }
  /* On mouse-over, add a deeper shadow */
  .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }

  .card_excerpt{
    float:right;
    width: 50%;
  }
  
  .card_image{
    width:40%;
  } 

.fRight {
  float: right;
}

.dFlex {
  display: flex;
}

.html

<div class="row">
  <div class="card col-12 dFlex" >
    <div class="col-6 card_excerpt">
      <h3><b>CARD TITLE</b></h3>
      <div>
        <ul>
          <li> Bullet 1</li>
          <li> Bullet 2</li>
          <li> Bullet 3</li>
          <li> Bullet 4</li>
          <li> Bullet 5</li>
          <li> Bullet 6</li>
          <li> Bullet 7</li>
        </ul>
      </div>
    </div>
    <div class="col-6 card_image fRight"> <img src="some img"/> </div>
  </div>
</div>
于 2020-07-20T13:43:55.697 回答