我的图像不保留绑定到他们的DIV
问题描述:
我把图像放在DIV中。我希望所有的三张图片是他们的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边框内,但现在看起来是这样的:
答
的问题是,图像是浮动的。当你浮动一个元素时,它会从页面的正常流程中取出(就像你绝对或固定的位置时一样)。
一种可能的解决方案是使盒子长到适合其中的图像。您可以实现通过添加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>
它是如何不工作?你能提供一个截图,并且也发布你的html吗? –
请阅读[问],以及如何创建[mcve]。 – CBroe
对不起CBroe,只是有点匆忙。 –