我的 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%;
}
content div 有文本，第二个 div 有一个右列，我在其中有一个图像，我希望将高度调整为带有文本的 div 的高度。因此，当我有许多使用相同布局的页面时，图像的高度与带有文本的 div 的高度相同。
谢谢。
最佳答案
这是一个简单的 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>
关于html - 如何将第二列的高度调整为第一列的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21429656/