установить одинаковые колонки высоты

У меня есть галерея изображений с 4 изображениями.установить одинаковые колонки высоты

Изображения могут быть различной высоты, но мне нужно, чтобы html/css делали одинаковые столбцы высоты (изображения растягивались).

Все работает отлично, пока я не ставлю <!DOCTYPE html>

Все остальные страницы работает с этой DOCTYPE, поэтому я не могу удалить его.

Как исправить мой код, что он хорошо работает с моим DOCTYPE?

img { 
 
    width: 100%; 
 
    max-width: 100%; 
 
} 
 
.cb { 
 
    clear: both; 
 
} 
 
.fl { 
 
    float: left; 
 
} 
 
.fr { 
 
    float: right; 
 
} 
 
.col1 { 
 
    width: 40%; 
 
    flex-flow: column; 
 
    display: flex; 
 
} 
 
.col2 { 
 
    width: 60%; 
 
} 
 
.gallery-top { 
 
    display: flex; 
 
}

<div class="gallery-top"> 
 
    <div class="fl col1"> 
 
    <div class=""> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=150%C3%9780&w=150&h=40" /> 
 
    </div> 
 
    <div class="" style="flex: 1; display: flex;"> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=150%C3%9780&w=150&h=120" /> 
 
    </div> 
 
    <div class="cb"></div> 
 
    </div> 
 
    <div class="fl col2"> 
 
    <div class=""> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=150%C3%9780&w=150&h=80" /> 
 
    </div> 
 
    <div class=""> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=150%C3%9780&w=150&h=80" /> 
 
    </div> 
 
    <div class="cb"></div> 
 
    </div> 
 
    <div class="cb"></div> 
 
</div>

источник

2016-11-28 lolalola

Можете ли вы обновить фрагмент с хорошей информацией о воспроизведении? –

Если вы используете '', вы используете html5. В html5 вам не нужно закрывать самозакрывающиеся теги наподобие '' – LuudJacobs

The <!DOCTYPE html> сообщает браузеру, что код присутствует на HTML5, поэтому браузер понимает это правильно. Все ваши документы должны иметь его на месте.

См. Это link для дальнейшего ознакомления.

Ваша разметка (html) немного беспорядочна, у вас есть пустые атрибуты класса. Попытайтесь всегда держите свой код в чистоте и организованном. Используйте классы, идентификаторы и ссылайтесь на них в своей таблице стилей правильно. Не используйте встроенные стили, если для этого не требуются конкретные проблемы.

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

Вы можете найти больше об использовании Flex-поле here.

Я сделалFiddle, чтобы помочь вам лучше понять эту концепцию.

источник

2016-11-28 16:36:39 snkv

Спасибо за код, но этот код работает только в том случае, если изображения имеют одинаковую высоту. Если в одном столбце одно изображение - 40 и второе 120 - тогда вы получите пустое пространство внизу. – lolalola

Возможно, это https://jsfiddle.net/qe20e5ve/1/, но столбцы должны иметь фиксированную равную ширину, иначе вы снова получите пробелы. То, что вам нужно, невозможно с помощью Flexbox, и вам придется использовать плагин, например http://masonry.desandro.com/ – snkv

установить одинаковые колонки высоты

ответ

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