Как я могу отрегулировать высоту второго столбца до высоты первого?

У меня есть этот код в моем файле 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 с текстом.

Спасибо.

источник

2014-01-29 Álvaro García

возможно дубликат [Выровнять высоту левого и правого DIV, предотвратить правый DIV от опуститесь ниже левой 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 для 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);

источник

2014-01-29 11:46:57

jQuery мне нужно писать в файле CSS или в html файл макета? Где я могу использовать функцию jQery? Большое спасибо. –

Я написал jquery, чтобы просто установить высоту изображения так же, как содержимое. поэтому нет необходимости писать css в jquery. вы можете записать его внутри заголовка под тегом скрипта или создать файл saperate js и прикрепить его как другие js-файлы или объединить его в конце выходящего. –

и как и где я использую функцию? Извините, я не знаю html. Благодарю. –

Как я могу отрегулировать высоту второго столбца до высоты первого?

ответ

Смежные вопросы