1

我目前正在开发一个新网站，但遇到了问题。我有 2 个相邻的 div，一个带有内容，一个带有背景图像。

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

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

这里有 2 个屏幕截图，可以让我的问题更加清晰。

从 Photoshop 中查看

从浏览器查看

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 解决此问题的任何想法？

谢谢

编辑：添加了我的代码

4

1 回答 1

0

没有真正的方法可以使两个并排的 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%
    }
于 2012-09-10T12:40:58.933 回答