如何防止兩個盒子元素重疊？

我在定位盒元素時遇到了問題。更具體地說，保持兩個盒子元素不重疊。我重視我的頁面的圖像顯示，你明白我的意思，我的代碼：如何防止兩個盒子元素重疊？

重疊問題：

overlap problem

<!DOCTYPE html> 
<html> 
<head> 
    <title>TMNT - Rancid Tomatoes</title> 
    <link rel="stylesheet" href="movie.css"> 

    <meta charset="utf-8" /> 
</head> 
<body> 
<div> 
<img class="width" src="images/rancidbanner.png" alt="Rancid Tomatoes"> 
</div> 

<h1>TMNT (2015)</h1> 

    <!---block one---> 
    <div class="div1"> 

     <!---block two---> 
     <div class="div2"> 
     <img class="tLeft" src="images/rottenlarge.png" alt="Rotten" />   <strong>33%</strong> 
     </div> 

    <!---block three---> 
    <div class="div3"> 
    <img class="tRight" src="images/overview.png" alt="general overview" /> 
    </div> 

    <!---box four---> 
    <div class="div4"> 
      <p>HEllo relkgnaldfkgnadlgsknasdlkgnasldkgnaslkdgnasldkn sjdnaslkdjfnaslkdjfn sdgnaslkjgnlaskjgdn 
     </p> 
     </div> 
    </div> 


</html> 


body{ 
    background-color: #C8C8C8; 
} 

h1{ 
    text-shadow: 2px 3px gray; 
    margin-left: auto; 
    margin-right: auto; 
    width: 200px; 
    } 

img.width{ 
    width: 100%; 
} 

img.tLeft { 
    float: left; 
    z-index: -1; 
    padding-right: 3em; 
} 

img.tRight { 
    float: right; 
} 


.div1 { 
position: relative; 
width: 900px; 
height: 700px; 
margin-left: auto; 
margin-right: auto; 
border-radius: 20px; 
box-shadow: 10px 10px 5px #A8A8A8; 
background-color: #4dffa6; 
overflow: hidden; 
} 

.div2 { 
width: 100%; 
height: auto; 
border: 1px solid red; 
overflow: hidden; 
border-top-left-radius: 20px; 
top: 0; 
left: 0; 
} 

.div3 { 
    position: absolute; 
    width: auto; 
    height: auto; 
    border: 1px solid red; 
    overflow: hidden; 
    border-top-right-radius: 20px; 
    top: 0; 
    right: 0; 
} 

.div4 { 
    position: absolute; 
width: auto; 
height: auto; 
border: 1px solid blue; 
background-color: lightgray; 
overflow: hidden; 
left: 0; 
} 

strong{ 
    font-size: 70px; 
    color: red; 
}

來源

2016-09-07 Christian Soto

直到你確實需要它時才使用位置。你可以刪除位置，並給兩個箱子浮動其中一個權利和一個主題離開和 – mkafiyan

Flexbox也是一個不錯的選擇@mkafiyan – 2016-09-07 05:49:43

@AhimanyuSingh是的，他也可以使用它 – mkafiyan

從不使用位置，直到你真正需要它只是改變你coode和刪除你的位置，你也給溢出隱藏的高度：汽車?????當你給高度自動，這意味着，直到你有你的div高度的數據或物品會自動變得越來越大。那麼溢出並不意味着。

.div4{ 
height:auto; 
width:300px; 
float:left; 
border: 1px solid blue; 
background-color: lightgray; 

} 
.div3{ 
float:right; 
width:300px; 
height:auto; 
border: 1px solid red; 
overflow: hidden; 
border-top-right-radius: 20px; 
}

如果你給寬度自動發生這個問題。給你的div寬度，也漂浮。

來源

2016-09-07 05:59:12 mkafiyan

謝謝，我會嘗試 –

@ChristianSoto如果我的方式可以解決你的問題只是告訴我。 – mkafiyan

您可以使用

的Flex箱

<div class='main-container'> 

<!-- Container for text --> 
<div class='first-container'> 
<p>Hello relkgnaldfkgnadlgsknasdlkgnasldkgnaslkdgnasldknsjdnaslkdjfnaslkdjf</p> 
</div> 

<!-- Container for image --> 
<div class='second-container'> 
<img src='' alt='general overview' /> 
</div> 
</div>

CSS代碼 -

.main-container{ 
display:flex; 
justify-content: space-between; 
}

這將保持兩個容器分開。就這麼簡單。

此外，您可以根據您的需要應用樣式。

來源

2016-09-07 05:59:36

如何防止兩個盒子元素重疊？

回答

相關問題