Создание тегов <div> одинаковой высоты

0

Я хотел сделать два divs равными по высоте, да, с разных форумов и блогов я нашел способ сделать это. Хотя я все еще работал, эти правила CSS (упомянутые в части запроса) беспокоят меня и, похоже, не понятны. здесь отметка: -

<div class="container">
    <div class="left-col">
        Hello there , This is Left content<br/>
        Hello there , This is Left content<br/>
    <div>

    <div class="right-col">
        Hello there , This is right content<br/>
        Hello there , This is right content<br/>
        Hello there , This is right content<br/>
        Hello there , This is right content<br/>
    </div>
</div>

И вот CSS:

.container{
height:100%;
overflow:hidden;
}

.left-col{
width:50%;
float:left;
padding-bottom:500em;
margin-bottom:-500em;
}

.right-col{
width:50%;
float:left;
padding-bottom:500em;
margin-bottom:-500em;
}

Query- Может кто-нибудь объяснить работу

padding-bottom:500em (or something)

&

margin-bottom:-500em(Use of negative sign).
  • 1
    class = "left-col" и .left-container разные, сначала измените это.
  • 1
    @ JDeveloper Lol ... готово!
Теги:

5 ответов

1
Лучший ответ

Свойство padding-bottom определяет ширину между содержимым элемента и нижней границей, представленной желтой выделенной областью на рисунке ниже. Изображение 174551

Значение по умолчанию равно 0, его можно определить в процентах, пикселях, pt или em.

Свойство margin-bottom определяет ширину между нижней границей элемента и внешним краем элемента, представленной желтой выделенной областью на рисунке ниже Изображение 174551

Определения для единиц:

"Ems" (em): "em" - это масштабируемая единица, которая используется в носителях веб-документов. Значение em равно текущему размеру шрифта, например, если размер шрифта документа равен 12pt, 1em равен 12pt. Ems являются масштабируемыми по своей природе, поэтому 2em будет равняться 24pt,.5em будет равняться 6pt и т.д. Ems становится все более популярным в веб-документах благодаря масштабируемости и их мобильному устройству.

Пиксели (пикселы): пиксели - это единицы фиксированного размера, которые используются в экранных носителях (т.е. для чтения на экране компьютера). Один пиксель равен одной точке на экране компьютера (наименьшее разделение вашего разрешения экрана). Многие веб-дизайнеры используют пиксельные единицы в веб-документах, чтобы создать идеальное представление пикселя своего сайта, поскольку оно отображается в браузере. Одна проблема с блоком пикселей заключается в том, что он не масштабируется вверх для слабовидящих читателей или вниз, чтобы соответствовать мобильным устройствам.

Баллы (pt): Точки традиционно используются в печатных носителях (все, что должно быть напечатано на бумаге и т.д.). Одна точка равна 1/72 дюйма. Точки очень похожи на пиксели, поскольку они фиксированные и не могут масштабироваться.

Процент (%): единица процента похожа на блок "em", за исключением нескольких фундаментальных различий. Прежде всего, текущий размер шрифта равен 100% (т.е. 12pt = 100%). При использовании единицы процента ваш текст остается полностью масштабируемым для мобильных устройств и для доступности.

Поделиться
  • 0
    спасибо товарищ помог много.
1

Я не могу комментировать, поэтому я отправляю это как ответ. Я недавно столкнулся с той же проблемой и нашел это: http://codepen.io/micahgodbolt/pen/FgqLc

Поделиться
1

Одним из хороших способов решения этой проблемы было бы автоматически установить высоту обоих разделов с помощью jQuery.

Например, скажем, у вас есть:

<div class="double_column_left">
    //code
</div>
<div class="double_column_right">
    //code
</div>

После этого верните высоту одного div '.double_column_right' и примените его к другой мини-высоте div ('.double_column_left'). Используйте следующий код JQuery:

var divHeight = $('.double_column_right').height();

$('.double_column_right').css('min-height', divHeight+'px');

Попробуйте это и дайте мне знать, если это поможет.

Поделиться
  • 0
    Ну, это то, что я искал thnx.
  • 0
    @ Ajaz Нет проблем. Поскольку вы нашли этот ответ полезным, не могли бы вы нажать «принять» / «поставить галочку» для этого ответа?
0

Я использовал этот плагин JQuery несколько раз и могу работать для вас, тем более, что оба столбца могут быть одинаковой высоты на основе содержимого столбцов.

Это Адам Вульф и можно найти по адресу http://welcome.totheinter.net/columnizer-jquery-plugin/.

Поделиться
0

заполнение относится к пространству внутри контейнера. Он работает извне. Margin относится к пространству вне этого объекта к следующему или к краю экрана.

Например, если у вас есть квадрат размером 100 пикселей и вы дали ему нижнюю часть: -20px. Ваш контент внутри коробки будет 20px от касания нижней части окна

Если вы предоставили ту же самую коробку, что и нижний край: 20px, все остальное, что вы разместите под полем, всегда будет 20px от него

Надеюсь, что ответ на ваш вопрос

Вот FIDDLE

<div id="wrapper">
    <div id="left-col">LEFT</div>
    <div id="right-col">RIGHT</div>
       <div class="clear">
          <p>I HAVE A MARGIN</p>
       </div>
    <div id="full-row">I HAVE PADDING</div>

</div>

Я предпочитаю идентифицировать свои контейнеры и CLASS мои элементы контейнера. Таким образом, я могу использовать вложенность и нацелить любой контейнер, который мне нужно изменить, не создавая слишком много классов. Но это зависит от вас.

Изображение 174551

Поделиться
  • 0
    да, я понимаю, что это помогло мне. У вас есть какое-то другое решение, чтобы сделать равные высоты div. Спасибо в любом случае.
  • 0
    Я отредактирую свой ответ, чтобы показать вам лучше
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню