HTML要点在div之外

我试图有一个HTML卡的标题，一个图像在右边和一个项目符号列表在左边。然而，子弹清单不在卡片上。如何使卡片的div适应其内容的长度

代码如下：

.card{
/*添加阴影以创建“卡片”效果*/
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
填充：20px；
宽度：100%；
}
/*在鼠标悬停时，添加更深的阴影*/
.卡：悬停{
盒影：0 8px 16px 0 rgba（0,0,0,0.2）；
}
.卡片摘录{
浮动：对；
宽度：50%；
}
.card_图像{
宽度：40%；
}

卡片标题

子弹1
子弹2
项目3
子弹4
子弹5
子弹6
子弹7

您可以将

清除：两个
添加到
.card\u image


.card{
/*添加阴影以创建“卡片”效果*/
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
填充：20px；
宽度：100%；
}
/*在鼠标悬停时，添加更深的阴影*/
.卡：悬停{
盒影：0 8px 16px 0 rgba（0,0,0,0.2）；
}
.卡片摘录{
浮动：对；
宽度：50%；
}
.card_图像{
宽度：40%；
明确：两者皆有；
}

卡片标题

子弹1
子弹2
项目3
子弹4
子弹5
子弹6
子弹7

您可以将
清除：两个
添加到
.card\u image


.card{
/*添加阴影以创建“卡片”效果*/
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
填充：20px；
宽度：100%；
}
/*在鼠标悬停时，添加更深的阴影*/
.卡：悬停{
盒影：0 8px 16px 0 rgba（0,0,0,0.2）；
}
.卡片摘录{
浮动：对；
宽度：50%；
}
.card_图像{
宽度：40%；
明确：两者皆有；
}

卡片标题

子弹1
子弹2
项目3
子弹4
子弹5
子弹6
子弹7

此外，如果您可以修改卡片结构，您可以使用flexbox而不是float来定位内容


.card{
/*添加阴影以创建“卡片”效果*/
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
填充：20px；
宽度：100%；
}
.card_inner{
显示器：flex；
}
img{
宽度：100%；
高度：自动；
}
/*在鼠标悬停时，添加更深的阴影*/
.卡：悬停{
盒影：0 8px 16px 0 rgba（0,0,0,0.2）；
}
.卡片摘录{
//float：对；//不需要
宽度：50%；
}
.card_图像{
宽度：40%；
明确：两者皆有；
}

卡片标题

子弹1
子弹2
项目3
子弹4
子弹5
子弹6
子弹7

此外，如果您可以修改卡片结构，您可以使用flexbox而不是float来定位内容


.card{
/*添加阴影以创建“卡片”效果*/
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
填充：20px；
宽度：100%；
}
.card_inner{
显示器：flex；
}
img{
宽度：100%；
高度：自动；
}
/*在鼠标悬停时，添加更深的阴影*/
.卡：悬停{
盒影：0 8px 16px 0 rgba（0,0,0,0.2）；
}
.卡片摘录{
//float：对；//不需要
宽度：50%；
}
.card_图像{
宽度：40%；
明确：两者皆有；
}

卡片标题

子弹1
子弹2
项目3
子弹4
子弹5
子弹6
子弹7

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


.card{
/*添加阴影以创建“卡片”效果*/
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
填充：20px；
宽度：100%；
显示器：flex；
柔性包装：包装；
对齐内容：居中对齐；
}
/*在鼠标悬停时，添加更深的阴影*/
.卡：悬停{
盒影：0 8px 16px 0 rgba（0,0,0,0.2）；
}
.卡>h3{
弹性：10100%；
}
.卡片摘录{
弹性：150%；
}
.card_图像{
弹性：140%；
}

卡片标题

子弹1
子弹2
项目3
子弹4
子弹5
子弹6
子弹7

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


.card{
/*添加阴影以创建“卡片”效果*/
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
填充：20px；
宽度：100%；
显示器：flex；
柔性包装：包装；
对齐内容：居中对齐；
}
/*在鼠标悬停时，添加更深的阴影*/
.卡：悬停{
盒影：0 8px 16px 0 rgba（0,0,0,0.2）；
}
.卡>h3{
弹性：10100%；
}
.卡片摘录{
弹性：150%；
}
.card_图像{
弹性：140%；
}

卡片标题

子弹1
子弹2
项目3
子弹4
子弹5
子弹6
子弹7

试试这个

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


卡片标题

子弹1
子弹2
项目3
子弹4
子弹5
子弹6
子弹7

试试这个。