Question

我的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>

我的CSS文件包含以下代码：

#content {
    //min-height: 400px;
    //height: auto;
    width: 76%;
    /*@NOTA: el padding modifica la separación entre las banderas con los idiomas el menú.*/
    //padding: 30px 0;
    /*Es todo lo que hay debabjo del menú y encima del anuncio de weebly.
    Es aquí donde se pondrá la imagen de fondo con el chorro del agua.*/
    //background-image: url('http://www.weebly.com/uploads/1/4/5/3/14535654/custom_themes/958714113245935093/files/aguaOriginal(opacidad%2035).png?1390925822559');
    //background-size:100% auto;
    //background-repeat:no-repeat;
    //background-position:center;
    /*Se tiene que dejar un margen para la columna de la derecha, donde irá el chorro del agua.*/
    //margin-right: 30%;
    margin-top: 1%;
    float:left;
}

#columna-derecha
{
    float: right;
    //width: 20%;
    height: 100%;
    //background: #123123;
    //padding: 30px 0;
    //margin-top: 2.5%;
}

内容div有文本，第二个div有一个右栏，我有一个我想要的图像高度调整到文本的div的高度。因此，当我有许多使用相同布局的页面时，图像的高度与带文本的div相同。

感谢。

Answer 1

这里我修改了你的html，希望这会有所帮助：

HTML PART：

`

<!--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>

`

jQuery for Div Height

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);

Answer 2

以下是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>

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

2 个答案: