我希望红色虚线在黑色实线内，即我不希望内容溢出到黑色实线之外。我也为容器类添加了最小高度，但内容溢出了。你能建议修改我的代码吗？谢谢!
这是 HTML 代码-
.container{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
min-height: 300px;
border: 1px solid black;
}
.item_1{
position: absolute;
left: 10%;
height: 210px;
width: 210px;
border: 1px dashed green;
float: left;
}
.item_2{
position: absolute;
left: 50%;
width: 210px;
transform: translate(-50%);
height: 210px;
border: 1px dashed green;
float: left;
}
.item_3{
position: absolute;
right: 10%;
width: 210px;
height: 210px;
border: 1px dashed green;
float: left;
}
.img{
padding: 5px;
}
.content{
text-align: center;
font-family: Roboto;
font-weight: bold;
min-height: 90px;
border: 1px dashed red;
}<html>
<head>
<link rel="stylesheet" href="second.css">
</head>
<body>
<div class="container">
<div class="item_1">
<img src="1.jpg" alt="Arya Stark" class="img">
<div class="content">
<h3>Arya Stark</h3>
<p>I am Arya Stark of House Winterfell.</p>
</div>
</div>
<div class="item_2">
<img src="2.jpg" alt="Jon Snow" class="img">
<div class="content">
<h3>Jon Snow</h3>
<p>I am a bastard and the king in the north.</p>
</div>
</div>
<div class="item_3">
<img src="3.jpg" alt="Tyrion Lannister" class="img">
<div class="content">
<h3>Tyrion Lannister</h3>
<p>I am the dwarf of Casterly Rocks and the hand to Danerys Targaryen</p>
</div>
</div>
</div>
</body>
</html>最佳答案
因为内部项是绝对定位的，所以它们脱离了文档的“流”。 .container 不知道它们在哪里结束。
如果您想要获得均匀间隔的 3 列布局，请考虑 flexbox或 CSS grid .
使用 flex 的例子:
.container {
display: flex;
justify-content: space-around;
border: 1px solid black;
}
.item {
border: 1px dashed green;
width: 210px;
}
.img {
padding: 5px;
}
.content {
text-align: center;
font-family: Roboto;
font-weight: bold;
min-height: 90px;
border: 1px dashed red;
}<div class="container">
<div class="item">
<img src="https://secure.gravatar.com/avatar/06f9bcd6524b095222a3b735927405d7?s=200&d=retro&r=pg" alt="Arya Stark" class="img">
<div class="content">
<h3>Arya Stark</h3>
<p>I am Arya Stark of House Winterfell.</p>
</div>
</div>
<div class="item">
<img src="https://secure.gravatar.com/avatar/06f9bcd6524b095222a3b735927405d7?s=200&d=retro&r=pg" alt="Jon Snow" class="img">
<div class="content">
<h3>Jon Snow</h3>
<p>I am a bastard and the king in the north.</p>
</div>
</div>
<div class="item">
<img src="https://secure.gravatar.com/avatar/06f9bcd6524b095222a3b735927405d7?s=200&d=retro&r=pg" alt="Tyrion Lannister" class="img">
<div class="content">
<h3>Tyrion Lannister</h3>
<p>I am the dwarf of Casterly Rocks and the hand to Danerys Targaryen</p>
</div>
</div>
</div>关于javascript - 如何防止 HTML/CSS 中父容器的内容溢出？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45643489/