두 개의 상자 요소가 겹치지 않게하려면 어떻게합니까?

상자 요소 배치에 문제가 있습니다. 보다 구체적으로, 두 개의 상자 요소를 겹치지 않게 유지합니다. 내가 무슨 뜻인지 당신과 내 코드를 보여 내 페이지의 이미지를 첨부 :두 개의 상자 요소가 겹치지 않게하려면 어떻게합니까?

중복 문제 : 당신이 정말 당신이 coode 변경해야 할 때까지

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

플렉스 박스 또한 좋은 옵션입니다 @ mkafiyan –

@AbhimanyuSingh 네 그는 너무 그것을 사용할 수 있습니다 – mkafiyan

위치를 사용하지 않습니다 및 당신의 위치를 제거하십시오, 또한 당신은 오버플로 숨 깁니다. 높이 : auto ????? 높이를 자동으로 지정하면 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에 너비를주고 또한 부유하게하십시오.

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

이 두 개의 컨테이너가 분리 유지합니다 -

출처

2016-09-07 05:59:12 mkafiyan

고마워요, 내가 그것을 시도해 보겠습니다 –

@ChristianSoto 경우 내 방식으로 문제를 해결할 수 있습니다. – mkafiyan

당신은

플렉스 박스

<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 코드를 사용할 수 있습니다. 간단합니다.

또한 스타일에 따라 스타일을 적용 할 수 있습니다.

출처

2016-09-07 05:59:36

두 개의 상자 요소가 겹치지 않게하려면 어떻게합니까?

답변

관련 문제