-3

嗨，我正在添加一张图片，但它总是重叠。

我希望 div 在内部 div 被调整大小时自动调整大小 例如当一个人上传图像时，它会在该图片上调整大小，使其适合 div 框

在此处输入图像描述

<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
        }
4

3 回答 3

0

尝试将以下内容添加到 CSS

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

这将导致.imageBox元素的高度是它的父元素的 100%，并且img元素中的元素div.imageBox也会适应。

于 2013-04-13T03:23:52.143 回答
0

你试过身高：自动；在 .MainBox 类中？

于 2013-04-13T03:25:35.463 回答
0

您的第一个子框有一个固定的高度，我必须在包装器的末尾添加一个 clear:both 以检测高度（您也可以使用 clear fix hack）

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

于 2013-04-13T03:29:47.517 回答