html - 图片嵌入div重叠

Question

我遇到图片从容器中取出的问题。

<div id="home"  class="cadre">      

<div id="photo">
    <img style="height:80%;float:right;max-height:250px;" src="images/photo.jpg"/>
</div>

<div style="width:70%;">  

Some text
</div>
</div>

下面是CSS样式表的相关内容:

img{
max-width:100%;
max-height:100%;
}

#photo{
    float: right;
    max-width:45%;
    height:90%;
    margin: 0 auto;
    }

.cadre {
color: black;
border-width: 0;
border-radius: 10px;
margin: 40px auto;
padding: 20px;
width: 95%;
background-color: rgba(200,200,200,.2);
box-shadow: 0px 1px 8px 0px rgba(0,0,0,.4) inset;
}

我是 CSS 的新手，所以我可能犯了设计错误，但我仍然不明白图片为什么会超出框架。

它似乎也取决于操作系统/资源管理器，因为它在 Windows/Chrome 上运行良好但在 Linux/Firefox 上运行不正常。

Answer 1

试试这个来解决你的父子宽度问题:

<div class="wrapper">
    <div class="inner"> 
        <div id="pic">
            <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT6xO92YTljrxvGfxHRnZ_F-jjYGQvfRST-18K3cJhJYPNfBlLTdg"/>
        </div>
        <div id="text">
            some text
            <br/><br/><br/><br/><br/><br/><br/>
            other text
        </div>
      </div>
</div>

和 CSS:

.wrapper {
    max-height: auto;
    background: red;
    display: table;
}
.inner {
    display: table-row;
}
#pic {
    float: right;
    height: 180px;
    max-height: 100%
}
#text {
    width:70%;
}