Question

嗨我正在添加一张照片，但它总是在一圈。

我希望div在内部div调整大小时自动调整大小示例当一个人上传时调整大小的图像，使其适合div框

enter image description here

<div class="MainBox">


    <div class="FirstChildBox">
                <div class="imageBox">
                        <img src="textimage2.jpg"/>
                </div>
                <div class="rateImage">
                    <div class="arrowupdownrate">
                        <div class="upArrow"><img src="up_down.png" /> </div>
                        <div class="rateNumber"><a>112320</a></div>
                        <div class="downArrow"><img src="red_down.png" /></div>
                    </div>
                </div>
                <div class="infoOfImage">
                        <div class="textImage"> 
                                <a href="#">Just a picture
                                </a>
                        </div>
                <div class="Thumbsups">
                    <div class="textparagraph"><p>asdasd</p></div>
                     <div class="fb-like" data-href="http://teamfirstdragon.com/" data-send="true" data-width="450" data-show-faces="false"></div>
                    <div class="fb-comments" data-href="http://teamfirstdragon.com/" data-width="450" data-num-posts="4"></div>
                </div>

        </div>
    </div>




<style>
.MainBox {
    margin:0px auto;
    border:1px solid #f00;
    width:900px;

}
    .MainBox .FirstChildBox {
        margin:10px;
        height:240px;
        width:880px;
    }
        .MainBox .FirstChildBox .rateImage {
            float:left;

            margin-left:5px;
            margin-right:5px;
            width:65px;
            height:239px
        }
            .MainBox .FirstChildBox .rateImage .arrowupdownrate {
                margin-top:40px;

            }
                .MainBox .FirstChildBox .rateImage .arrowupdownrate .upArrow {
                            margin-left:7px;
                            cursor:pointer;
                 }
                 .MainBox .FirstChildBox .rateImage .arrowupdownrate .rateNumber {
                         margin:5px;
                         width:52px;
                         height:20px;
                         text-align:center;
                 }
                    .MainBox .FirstChildBox .rateImage .arrowupdownrate .rateNumber a {
                        font-family:'Comic Sans MS',Arial,Calibri;
                    }
                 .MainBox .FirstChildBox .rateImage .arrowupdownrate .downArrow {
                        margin-left:7px;
                        margin-top:10px;
                        cursor:pointer;
                 }
        .MainBox .FirstChildBox .imageBox {
            float:left;
            width:350px;
        }
        .MainBox .FirstChildBox .imageBox img {
            width:350px;
        }
        .MainBox .FirstChildBox .infoOfImage {
            float:right;
        }
            .MainBox .FirstChildBox .infoOfImage .Thumbsups {
                border:1px solid #ff6a00; 
                width:450px;
                height:204px
            }
                .MainBox .FirstChildBox .infoOfImage .Thumbsups .fb-comments {
                    position:relative;
                }
                .MainBox .FirstChildBox .infoOfImage .Thumbsups .fb-like {
                    position:relative;

                }
            .MainBox .FirstChildBox .infoOfImage .textImage {
                text-align:center;
                width:450px;

            }

        .MainBox .FirstChildBox .infoOfImage .textImage a {
            position:relative;
            font-family: 'Comic Sans MS',Calibri,'Times New Roman';
            text-decoration:none;
            font-size:25px;
            font-weight:bold
        }

Answer 1

尝试将以下内容添加到CSS

.imageBox { height: 100%; }
.imageBox img { height: 100%; }

这将导致.imageBox元素的高度为其父级的100％，并且img中的div.imageBox元素也可以适应。

Answer 2

你尝试过身高：自动;在.MainBox类？

Answer 3

你的第一个儿童盒子上有一个固定的高度，我必须添加一个清晰的：在你的包装器的末尾都有它来检测高度（你也可以清楚修复黑客）

http://codepen.io/anon/pen/eGlfa

图像在div中重叠

3 个答案: