提问者：小点点
HTML项目符号超出div[重复]
我正在尝试有一个HTML卡与一个标题，一个图像在右边和一个项目符号列表在左边。 但是，子弹列表走在卡的外面。 如何使卡片的div适应其内容的长度？
下面是代码:
null.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
padding: 20px;
width: 100%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.card_excerpt {
float: right;
width: 50%;
}
.card_image {
width: 40%;
}
CARD TITLE
- Bullet 1
- Bullet 2
- Bullet 3
- Bullet 4
- Bullet 5
- Bullet 6
- Bullet 7
null
共3个答案
匿名用户
您可以将clear:both添加到.card_image中
null.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
padding: 20px;
width: 100%;
}
.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;
}
CARD TITLE
- Bullet 1
- Bullet 2
- Bullet 3
- Bullet 4
- Bullet 5
- Bullet 6
- Bullet 7
匿名用户
另外，如果你可以修改你的卡片结构，你可以使用flexbox而不是float来定位你的内容。
null.card {
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;
}
.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;
}
CARD TITLE
- Bullet 1
- Bullet 2
- Bullet 3
- Bullet 4
- Bullet 5
- Bullet 6
- Bullet 7
匿名用户
这可以很容易地用flexbox完成，而不需要修改HTML
null.card {
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;
}
.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%;
}
CARD TITLE
- Bullet 1
- Bullet 2
- Bullet 3
- Bullet 4
- Bullet 5
- Bullet 6
- Bullet 7