Я не могу заставить мой div использовать фиксированную высоту.Сделали обширные испытания

Question

По замечанию моего лектора, использование таблиц для создания красивого встроенного макета не является "хорошей практикой кодирования".Итак, я переключился на использование div, которые работали нормально для любых проблем, основанных на width , но:

Я не могу установить статическую высоту.Мне нужно, для того, чтобы поставить мои div в строке.Вот снимок экрана веб-сайта, который я создаю для своего класса: (обрезано) https://i.imgur.com/wvaSFEz.png

Когда я использовал таблицы для своего макета, я смог сохранить «Новости» и «Рекомендуемые товары» в одной строке,тогда как с divs я не могу.

Вот что я пробовал;min-height с px или%, высота с px или%, max-height с px или%, позиция: абсолютная, переполнение: скрытое, отображение: встроенное, отображение: встроенный блок, положение: фиксированное, все взято из переполнения стека "ответы "и их комбинации.

Я также пытался создать пустой (с одним тегом <br />) элемент шириной 100%, который будет располагаться под двумя первыми элементами и над последними двумя, нопо какой-то причине этот div просто находится под моей навигационной панелью в верхней части основного контейнера div, и, похоже, его не волнует его расположение относительно других элементов div в коде.

Я использую cssТаблица стилей, четыре используемых мной элемента div содержатся в главном элементе класса «container».Вот мой рабочий код;

.container {
    /* border: 2px solid red; /* For seeing the margins */
    margin-top: 3%;
}

.leftspacewide {
    /* border: 2px solid red; /* For seeing the margins */
    max-width: 74%;
    width: 74%;
    float: left;
}

.rightspacethin {
    /* border: 2px solid red; /* For seeing the margins */
    max-width: 24%;
    width: 24%;
    float: right;
}

И в моем реальном HTML-коде это выглядит так:

<div class='container'>
    <div class='leftspacewide'>
        welcome content here
    </div>
    <div class='rightspacethin'>
        login form here
    </div>
    <div class='leftspacewide'>
        featured product content here
    </div>
    <div class='rightspacethin'>
        news content here
    </div>
</div>

Я не понимаю, почему каждый прочитанный мною ответ нене работает.

Answer 1

Попробуйте эту структуру с flex.Это должно работать как ожидалось.Я добавил цвета, чтобы различить 4 конатинера

 

.container {
    /* border: 2px solid red; /* For seeing the margins */
    width: 100%;
    margin-top: 3%;
}
.row {
  display: flex;
}
.leftspacewide {
  width: 74%;
}
.rightspacethin {
  width: 26%;
}

<div class='container'>
  <div class="row">
    <div class='leftspacewide' style='background-color: red;'>
        welcome content here welcome content here welcome content here welcome content here welcome content herewelcome content herewelcome content herewelcome content herewelcome content herewelcome content herewelcome content herewelcome content herewelcome content herewelcome content herewelcome content here
    </div>
    <div class='rightspacethin' style='background-color: yellow;'>
        login form here             login form here             login form here             login form here
    </div>
  </div>
  <div class="row">
    <div class='leftspacewide' style='background-color: blue;'>
        featured product content here             featured product content here             featured product content here             featured product content here             featured product content here
    </div>
    <div class='rightspacethin' style='background-color: green;'>
        news content here             news content here             news content here             news content here
    </div>
  </div>
</div>