Question

我希望红色虚线在黑色实线内，即我不希望内容溢出黑色实线。我已经为容器类添加了min-height，但内容溢出了。你可以建议修改我的代码。谢谢！

这是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>

Answer 1

因为内部项目是绝对定位的，所以它会将它们从＆＃34; flow＆＃34;该文件。 .container并不知道他们的结局。

如果您尝试获得均匀分布的3列布局，请考虑flexbox或CSS grid。

使用flex的示例：

＆＃13;

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

＆＃13;

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

＆＃13;

如何防止HTML / CSS中的父容器溢出内容？

1 个答案: