2つのボックス要素が重なって表示されないようにするにはどうすればよいですか？

ボックス要素の配置に問題があります。具体的には、2つのボックス要素を重複させないようにします。私は私が何を意味するか、あなたと私のコードを表示するために私のページの画像を添付：2つのボックス要素が重なって表示されないようにするにはどうすればよいですか？

オーバーラップの問題：あなたは本当にそれがちょうどあなたが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

あなたが本当に必要とするまでポジションを使用しないでください。あなたはポジションを取り除くことができ、2つのボックスをフロート右に置くことができます。また、テーマの1つ左と – mkafiyan

フレックスボックスも良いオプションです@mkafiyan –

@AbhimanyuSinghはい彼も使用できます – mkafiyan

位置を使用することはありませんし、あなたの位置を取り除く、またあなたは高さでオーバーフロー隠しを与える：オート?????自動高さを指定すると、データやアイテムが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 if私の方法はあなたの問題を解決することができます私に教えてください。 – 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

2つのボックス要素が重なって表示されないようにするにはどうすればよいですか？

答えて

関連する問題