Html 如何将第二列的高度调整为第一列的高度？_Html_Css_Layout

Html 如何将第二列的高度调整为第一列的高度？

html css layout

Html 如何将第二列的高度调整为第一列的高度？,html,css,layout,Html,Css,Layout,我的hmtl样式文件中有以下代码： <div id="main-wrap">  <div id="page"> <div id="main">  &

我的hmtl样式文件中有以下代码：

<div id="main-wrap">
    <!--Page es también eltítulo y el texto principal.-->
    <div id="page">
        <div id="main">
        <!--El content es el título y todo el texto principal.-->
            <div id="content">{content}</div>
            <div id="columna-derecha"><IMG src="http://www.weebly.com/uploads/1/4/5/3/14535654/custom_themes/958714113245935093/files/aguaOriginal.jpg?1390992371290"></div>
        </div>
    </div>
</div>

content div有文本，第二个div有一个右列，其中我有一个图像，我希望将高度调整为带文本的div的高度。因此，当我有许多使用相同布局的页面时，图像的高度与包含文本的div的高度相同

谢谢。

我在这里修改了您的html，希望这对您有所帮助：

HTML部分：

下面是一个简单的CSS选项：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">

#main {display: table; }
#main > div {display: table-cell; vertical-align: top;}

</style>
</head>
<body>

<div id="main-wrap">
    <div id="page">
        <div id="main">
            <div id="content">{content}</div>
            <div id="columna-derecha"><IMG src="http://www.weebly.com/uploads/1/4/5/3/14535654/custom_themes/958714113245935093/files/aguaOriginal.jpg?1390992371290"></div>
        </div>
    </div>
</div>

</body>
</html>


#主{显示：表；}
#main>div{显示：表格单元格；垂直对齐：顶部；}
{content}

jQuery的可能重复项我必须写入CSS文件还是html布局文件？我在哪里使用jQery函数？非常感谢。我编写jquery只是为了将图像高度设置为与内容相同。因此，不需要在jquery中编写css。您可以将其写入脚本标记下的标题中，或者创建一个saperate js文件，并像其他js文件一样附加它，或者在现有文件的末尾合并它。我如何以及在何处使用该函数？对不起，我不知道html。谢谢。很简单，只需从这个链接复制代码：并将其粘贴到标签之前。另外，还要附加jquery库，否则它将无法工作。

<!--Page es también eltítulo y el texto principal.-->
<div id="page">
    <div id="main">
        <!--El content es el título y todo el texto principal.-->
        <div id="content">{content1}
            <br>{content2}
            <br>{content3}</div>
        <div id="columna-derecha">
            <IMG height="100%" width="100%" src="http://www.weebly.com/uploads/1/4/5/3/14535654/custom_themes/958714113245935093/files/aguaOriginal.jpg?1390992371290">
        </div>
    </div>
</div>

setHeight = function (src, target) {
    h = src.height();
    target.css('height', h + 'px');
}

content = $('#content'); //Content Div
imagediv = $('#columna-derecha'); //Image Div

//Just modify Content and Image divs as per your need and you should have the result.

setHeight(content, imagediv);

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">

#main {display: table; }
#main > div {display: table-cell; vertical-align: top;}

</style>
</head>
<body>

<div id="main-wrap">
    <div id="page">
        <div id="main">
            <div id="content">{content}</div>
            <div id="columna-derecha"><IMG src="http://www.weebly.com/uploads/1/4/5/3/14535654/custom_themes/958714113245935093/files/aguaOriginal.jpg?1390992371290"></div>
        </div>
    </div>
</div>

</body>
</html>