0

我有一个 div，当我在那个潜水中放一张图片并且只设置图片的宽度以便它可以有适当的比例时，div 不会扩展到它所在的 div 的大小？

请问你能帮忙吗？

（如果您运行下面的代码，我希望粉红色的 div 在我添加任何内容时展开）

非常感谢！

html

<html>
<head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <div class="gigantic">
        <div class="main">
            <div class="twitterPP">
                <img src="https://si0.twimg.com/profile_images/2015016150/petecashmoreavatar_normal.png">
            </div>
            <div class="mainMedia">
                <img src="http://rack.1.mshcdn.com/media/ZgkyMDEzLzAzLzA4LzY1L2F0dC4yZjU4Mi5qcGcKcAl0aHVtYgk5NTB4NTM0IwplCWpwZw/91fe06f6/108/att.jpg">
            </div>
        </div>

        <div class="main">

        </div>
    </div>
</body>
</html>

css

.gigantic
{
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    background-color: #0f0;
    padding: 6px;
    margin-top: 100px;
}

.main 
{
    width: 800px;
    background-color: #f0f;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 100px;
}

.twiterpp
{
    width: 60px;
    float: left;
    margin-right: 50px;
    margin-left: 50px;
}

.twitterpp img
{
    width: 55px;
    height: 55px;
    border-radius: 3px;
    margin-left: 6px;
    margin-top: 6px;
    position: relative;
}

.mainMedia
{
    float: right;
    width: 700px;
}

.mainMedia img
{
    width: 700px;
}
4

2 回答 2

0

您可以使用高度：自动；当图像发生变化时自动设置 div 的高度。如果要自动设置宽度，宽度也一样。

当它应该是 .twitterPP 时，您还键入了 .twitterpp。避免对类和 ID 使用大写字母。

于 2013-03-09T20:39:23.313 回答
0

尝试这样设置 -

HTML

<div class="img-box"></div>

CSS -

.img-box {
background-image: url(images/yourimg.gif);
background-repeat: no-repeat;
width: 100px;
padding: 0px 0px 0px 0px; 
}

然后设置宽度以匹配您自己的偏好和填充以控制图像放置

于 2013-03-09T20:49:23.553 回答