Question

我目前正在开发一个新网站，我遇到了问题。我在彼此旁边有两个div，一个有内容，一个有背景图像。

包含内容的div已经全部自动扩展，其中包含内容

现在，具有背景图像的那个只是用于设计，其中没有内容，我希望它能够自动扩展内容，因此它们都具有相同的高度。

以下是两个截图，让我的问题更加清晰。

HTML：

        <div id="bubble">
            Stad Turnhout
        </div>

        <div id="date">
            <span class="created">created</span><br/><span class="date">okt<br/>2011</span>
        </div>

    </div>

    <div id="slash">
    </div>

    <div class="textfield">
        <p class="text">
            Text goes in here
        </p>

    </div>

CSS：

#slash {
float:left;
width:20px;
height:auto;
background:url(images/slash.jpg) no-repeat, url(images/socialbg.jpg) repeat;}


.textfield {
padding:25px;
width:269px;
height:auto;
float:right;
background:url(images/point.jpg) no-repeat, #FFF;}

我一直在尝试几件事，并尝试在谷歌上找到一些东西，但没有什么是有用的。有关如何使用HTML / CSS解决此问题的想法吗？

由于

编辑：添加了我的代码

Answer 1

没有真正的方法可以让两个并排的div始终保持相同的高度和可扩展性。您可以为这两个元素提供父包装，然后在该包装器上设置高度，然后为两个子div提供100％的高度。然后它们的高度将由包装纸的固定高度控制。

HTML：

<div class="wrapper">
        <div id="slash"></div>

        <div class="textfield">
            <p class="text">
                Text goes in here
            </p>    
        </div>
    </div>

CSS：

    .wrapper {
        height: 350px;
    }
    #slash, .textfield {
        height: 100%
    }

CSS div扩展没有内容

1 个答案: