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

-1

我希望紅色虛線位於黑色實線內，即我不希望內容溢出黑色實線。我也爲容器類添加了最小高度，但內容溢出。你可以在我的代碼中修改相同的代碼。謝謝！

這裏的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>

來源

2017-08-11 Raj Malhotra

第1步：停止使用絕對定位釘住一切。這不是你想要的工具。去做一些關於如何以正確方式實現CSS列或網格佈局的研究。 – CBroe

絕對定位是佈局網頁的非常糟糕的方法。它非常不靈活，並且有更好更快的響應選項。查看[** LearnLayout.com **]（http://learnlayout.com/） –

由於內部資料的絕對定位，他們花了文件的「流」。 .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>

來源

2017-08-11 21:01:46 pixleight

你有你的容器（空箱），基本符合什麼也沒有，因爲你使用的所有項目的絕對位置。爲了給你的容器賦予它內部物品的「重量」（你要找的東西），你需要改變物品的樣式以使容器意識到裏面有東西。

我不會爲此使用任何東西。我只是將百分比值用於一切。（即使我沒有在我的小提琴中）這將保持簡單，並提供流體網格中的列的一些基本瞭解。 33％爲3色，25色爲4色等。

我們可以從編輯容器開始，因爲新樣式會處理您要查找的高度。

.container{ 
    position: relative; 
    text-align:center; 
    width: 100%; 
    border: 1px solid black; 
}

這將提供一個更好的集裝箱集中在其中的項目。

然後，您可以將正確的樣式添加到項目。

.item_3, .item_2, .item_1 { 
    vertical-align:top; 
    padding: 10px; 
    display: inline-block; 
    max-width: 140px 
}

這應該給你一個體面的想法，你想達到什麼。這是更好的方式，因爲你的容器現在有'重量'，並將流動的內部物品的高度。我相信你可以處理調整填充和最大寬度區域，以得到你喜歡的。

這裏是一個小提琴例如：https://jsfiddle.net/70pLs8j1/

這應該讓你更多的軌道上你打算做什麼。

來源

2017-08-12 01:44:45 lscmaro

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

回答

相關問題