Wie verhindere ich, dass sich zwei Boxelemente überschneiden?

Ich habe Probleme mit der Positionierung der Box-Elemente. Genauer gesagt, das Überschneiden zweier Boxelemente. Ich legte das Bild von meiner Seite zu zeigen, was ich meine, und meine Code:Wie verhindere ich, dass sich zwei Boxelemente überschneiden?

Overlap Problem:

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

Quelle

2016-09-07 Christian Soto

verwenden Sie nie die Position, bis Sie sie wirklich brauchen. Sie können Position entfernen und zwei Box Float geben eine von ihnen rechts und eine der Themen links und – mkafiyan

Flexbox ist auch eine gute Option @mkafiyan –

@AbhimanyuSingh ja er kann es auch verwenden – mkafiyan

nie Position verwenden, bis Sie es wirklich brauchen nur ändern Sie Coode und Entferne deine Position, auch du gibst einen Überlauf-versteckt mit der Höhe: auto ????? Wenn Sie Höhe automatisch eingeben, bedeutet dies, dass bis Sie Daten oder Artikel in Ihrer div-Höhe haben, automatisch größer und größer werden. dann bedeutet Überlauf nicht.

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

Wenn Sie Breite Auto geben dieses Problem passiert. Gib deinem DIV Weite und schwimme auch.

Quelle

2016-09-07 05:59:12 mkafiyan

Vielen Dank, ich werde es versuchen –

@ChristianSoto wenn Mein Weg kann Ihr Problem lösen. Sagen Sie es mir einfach. – mkafiyan

können Sie

Flex Box

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

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

die beiden Behälter getrennt Dies hält. Einfach so.

Zusätzlich können Sie Stil entsprechend Ihrer Notwendigkeit anwenden.

Quelle

2016-09-07 05:59:36

Wie verhindere ich, dass sich zwei Boxelemente überschneiden?

Antwort

Verwandte Themen