如何將第二列的高度調整到第一列的高度？

我有這樣的代碼在我的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的高度相同。

謝謝。

來源

2014-01-29 Álvaro García

可能重複[色調均左，右div的高度，防止右格從去下面左格（http://stackoverflow.com/問題/ 18362026/equalize-the-height-of-left-and-right-div-prevent-right-div-from-going-below-le） –

下面是一個簡單的選擇與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>

來源

2014-01-29 12:28:06

在這裏，我已經修改了你的HTML，希望這有助於：

HTML部分：

<!--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的事業部高度

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

來源

2014-01-29 11:46:57

我必須在CSS文件或html中寫入jQuery佈局文件？我在哪裏使用jQery功能？非常感謝。 –

我寫jQuery的只是設置圖像高度相同的內容。所以不需要在jquery中編寫css。你可以在腳本標記下的標題內寫入它，或創建一個安全的js文件並像其他js文件那樣附加它，或者在退出的文件結尾合併它。 –

以及如何以及在哪裏使用該功能？對不起，我不知道html。謝謝。 –

如何將第二列的高度調整到第一列的高度？

回答

相關問題