html - HTML 项目符号点超出 div

Question

我正在尝试使用带有标题的 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>

结果：

标签： htmlcsshtml-listsbulletedlist

Answer 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>