내 이미지가 DIV에 바인딩되어 있지 않습니다.

Question

DIV 안에 이미지를 넣습니다. 나는 세 가지 사진들이 DIV 경계 내부에 싶어하지만 그냥 작동하지 않는 것 :

#container { 
 
    margin-right: 10%; 
 
    margin-left: 10%; 
 
    border-style: solid; 
 
    border-width: 5px; 
 
    border-color: orange; 
 
    background-color: yellow; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
} 
 

 
#original, 
 
#alike1, 
 
#alike2 { 
 
    margin: 10px; 
 
    border-style: solid; 
 
    border-width: 5px; 
 
    border-color: orange; 
 
    background-color: rgb(0, 200, 255); 
 
} 
 

 
img.pic2, 
 
img.pic3 { 
 
    float: right; 
 
    clear: both; 
 
    overflow: hidden; 
 
    margin: 10px; 
 
} 
 

 
#pic1 { 
 
    float: right; 
 
    clear: both; 
 
    overflow: hidden; 
 
    margin-right: 20px; 
 
    margin-top: 40px; 
 
}

<div id="container"> 
 

 
    <h1> Trump Hair </h1> 
 

 
    <div id="original"> 
 
    <h2> Original </h2> 
 
    <p> The Donald 
 
     <div> <img id=pic1 height="100" alt="Don" src="http://lorempixel.com/100/100/people"> </div> 
 
    </p> 
 
    <p> This is the original Trump hair. It is found often in nature. 
 
     <p> 
 
    </div> 
 

 
    <div id="alike1"> 
 
    <h2> Look alike #1</h2> 
 
    <p>Corn Silk <img class="pic2" height="100" alt="Corn" src="http://lorempixel.com/100/100/cats"></p> 
 
    <p>There have been many cases of corn silk that appear like Trump's hair. 
 
     <p> 
 
    </div> 
 

 
    <div id="alike2"> 
 
    <h2> Look alike #1 </h2> 
 
    <p> Llama Hair <img class="pic3" alt="llama" height="100" src="http://lorempixel.com/100/100/abstract"> </p> 
 
    <p> There are many animals that have Trump hair. This llama is looking very stylish. </p> 
 
    </div> 
 

 
</div>

내가 그것을 어떻게 해결할 수 있습니까? 나는 세 가지 사진들이 DIV 경계 내부에 싶어하지만 지금은 다음과 같습니다

as you can see the images flow out of the divs을 :

Answer 1

문제는 이미지가 떠 있다는 것입니다. 요소를 부유 시키면 절대적인 또는 고정 된 위치를 할 때와 같이 페이지의 정상적인 흐름에서 벗어납니다.

하나의 가능한 해결책은 이미지를 상자 안에 넣고 상자 안에 넣는 것입니다. 당신은 overflow:auto 및 height:auto을 추가하여, 다음 상자가 한계 내의 모든 부동 요소를 포함 성장할 것으로 얻을 수 있습니다

#container { 
 
    margin-right: 10%; 
 
    margin-left: 10%; 
 
    border-style: solid; 
 
    border-width: 5px; 
 
    border-color: orange; 
 
    background-color: yellow; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
} 
 

 
#original, 
 
#alike1, 
 
#alike2 { 
 
    margin: 10px; 
 
    border-style: solid; 
 
    border-width: 5px; 
 
    border-color: orange; 
 
    background-color: rgb(0, 200, 255); 
 
    /* add the changes here */ 
 
    height: auto; 
 
    overflow: auto; 
 
} 
 

 
img.pic2, 
 
img.pic3 { 
 
    float: right; 
 
    clear: both; 
 
    overflow: hidden; 
 
    margin: 10px; 
 
} 
 

 
#pic1 { 
 
    float: right; 
 
    clear: both; 
 
    overflow: hidden; 
 
    margin-right: 20px; 
 
    margin-top: 40px; 
 
}

<div id="container"> 
 

 
    <h1> Trump Hair </h1> 
 

 
    <div id="original"> 
 
    <h2> Original </h2> 
 
    <p> The Donald 
 
     <div> <img id=pic1 height="100" alt="Don" src="http://lorempixel.com/100/100/people"> </div> 
 
    </p> 
 
    <p> This is the original Trump hair. It is found often in nature. 
 
     <p> 
 
    </div> 
 

 
    <div id="alike1"> 
 
    <h2> Look alike #1</h2> 
 
    <p>Corn Silk <img class="pic2" height="100" alt="Corn" src="http://lorempixel.com/100/100/cats"></p> 
 
    <p>There have been many cases of corn silk that appear like Trump's hair. 
 
     <p> 
 
    </div> 
 

 
    <div id="alike2"> 
 
    <h2> Look alike #1 </h2> 
 
    <p> Llama Hair <img class="pic3" alt="llama" height="100" src="http://lorempixel.com/100/100/abstract"> </p> 
 
    <p> There are many animals that have Trump hair. This llama is looking very stylish. </p> 
 
    </div> 
 

 
</div>