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的新手，所以我可能犯了设计错误，但我仍然不明白这些图片是如何脱离框架的。

它似乎也依赖于OS /资源管理器，因为它在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%;
}

Answer 2

您需要定义嵌入照片的父div，使其不允许任何元素进入＆＃34; overboard＆＃34;。

#photo { overflow: hidden; }

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

应该在你的情况下做到这一点。

嵌入div重叠的图片

2 个答案: