Приветствую, уважаемые форумчане! При создании html документа пролюбил в начале <!DOCTYPE html> и пилил себе кусок странички. Позже прописал doctype в начало странички и всё солмалось. А именно - flex. Вот так выглядит страница без <!DOCTYPE html> (как и ожидается) Спойлер: NORM Вот так с <!DOCTYPE html> Спойлер: WTF Спойлер: HTML HTML: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Hotels</title> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/style.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="js/scripts.js"></script> </head> <body> <div class="hotels"> <div class="hotel"> <h4>Название отеля</h4> <div class="HotelFoto"> </div> <div class="HotelCont"> <div class="select"> <p>Дополнительное место:</p> <p> <select> <option>1</option> <option>2</option> <option>3</option> </select><span>▼</span> </p> </div> <div class="select"> <p>Количество номеров:</p> <p> <select> <option>1</option> <option>2</option> </select><span>▼</span> </p> </div> <div class="radios"> <div class="price"> <p>2555 ₽ <br/> <span>Цена за одну ночь/ночей</span> </p> </div> <label><input type="radio" name="typeprice" /><span></span> <b>Только размещение</b></label> <label><input type="radio" name="typeprice" /><span></span> <b>Завтрак включен</b></label> <label><input type="radio" name="typeprice" disabled /><span></span> <b>Полупансион</b></label> <label><input type="radio" name="typeprice" disabled /><span></span> <b>Полный пансион</b></label> </div> <div class="buttons"> <input type="button" class="DostBut" value="Доступность" /> <input type="button" class="PodrBut" value="Подробнее" /> <input type="button" class="BronBut" value="Забронировать" /> </div> </div> </div> <div class='hotel'> </div> <div class='hotel'> </div> </div> </body> </html> Спойлер: CSS Код (CSS): *{ margin:0; padding:0; box-sizing:border-box; } input:focus, textarea:focus, button:focus, select:focus { outline:none; } .hotels { /* height:100%;*/ margin:auto; max-width:1000px; box-shadow:0 0 3px #000; padding:5px 10px; } .hotel { padding:5px; box-shadow:0 0 10px #000; margin:10px 5px; display:flex; justify-content:space-around; flex-wrap:wrap; } .hotel h4 { width:100%; padding:10px 20px; color:#555; background:#d8d8d8; } .hotelFoto { flex-grow:1; box-shadow:0 0 10px #000; background-color:#f00;width:400px; flex-basis:400px; background-image:url(../img/foto1.jpg); background-position:center center; background-size:cover; height:400px; margin:5px; } .hotelCont { flex-basis:400px; box-shadow:inset 0 0 10px #000; flex-grow:2; height:400px; margin:5px; display:flex; justify-content:space-around; flex-wrap:wrap; align-items:flex-start; }
Я не пробовал никогда без доктайпа). А так фотки отвалились кажется, интересно взглянуть че там. бегло взгялунл на css не вижу чтобы ты задавал display: flex --- Добавлено --- А, все теперь увидел) Один глаз косит, извиняй) --- Добавлено --- Устал маленько)
Код (CSS): body{ margin:0; padding:0; box-sizing:border-box; } input:focus, textarea:focus, button:focus, select:focus { outline:none; } .hotels { /* height:100%;*/ margin:auto; max-width:1000px; box-shadow:0 0 3px #000; padding:5px 10px; } .hotel { padding:5px; box-shadow:0 0 10px #000; margin:10px 5px; display:flex; flex-flow: column; flex-basis: 100%; height: 500px; } .hotel h4 { width: auto; padding:10px 20px; color:#555; background:#d8d8d8; margin: 0; } .HotelFoto { display: flex; background-color:#f00; background-image: url(m.jpg); background-position:center center; background-size:cover; margin:5px; flex: 0 1 auto; width: 500px; } .hotel-options { box-shadow:inset 0 0 10px #000; margin:5px; display:flex; flex-flow: wrap; flex: 0 2 auto; } .hotel-cont{ display: flex; flex-basis: 100%; } HTML: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Hotels</title> </head> <body> <div class="hotels"> <div class="hotel"> <h4>Название отеля</h4> <div class="hotel-cont"> <div class="HotelFoto"> </div> <div class="hotel-options"> <div class="select"> <p>Дополнительное место:</p> <p> <select> <option>1</option> <option>2</option> <option>3</option> </select><span>▼</span> </p> </div> <div class="select"> <p>Количество номеров:</p> <p> <select> <option>1</option> <option>2</option> </select><span>▼</span> </p> </div> <div class="radios"> <div class="price"> <p>2555 ₽ <br/> <span>Цена за одну ночь/ночей</span> </p> </div> <label><input type="radio" name="typeprice" /><span></span> <b>Только размещение</b></label> <label><input type="radio" name="typeprice" /><span></span> <b>Завтрак включен</b></label> <label><input type="radio" name="typeprice" disabled /><span></span> <b>Полупансион</b></label> <label><input type="radio" name="typeprice" disabled /><span></span> <b>Полный пансион</b></label> </div> <div class="buttons"> <input type="button" class="DostBut" value="Доступность" /> <input type="button" class="PodrBut" value="Подробнее" /> <input type="button" class="BronBut" value="Забронировать" /> </div> </div> </div> </div> <div class='hotel'> </div> <div class='hotel'> </div> </div> </body> </html> Как-то так. А почему не jsfiddle)/ --- Добавлено --- Я стили и js файлы твои открепил, тебе их придется прописывать заново, и картинку в css) --- Добавлено --- Картинку я бы не грузил через css, правда не знаю почему ты так делешь, можешь есть такая необходимость. --- Добавлено --- Кстати, я тестировал через последние версии google chrome и firefox
вся проблема была в том, что я днище мрачное. косяк был в регистре названия классов --- Добавлено --- доктайп надо писать сразу, чтобы косяки вылазили по пути.
он говорит "убери теги html head..." и т д ни когда не думал об этом. Типа грузится сначала css файл, а потом уже картинка и дольше получается в итоге?
Не, просто конкретно тут я подумал удобнее эти картинки держать в html. Да и с флексами когда играешься есть плюс. )) --- Добавлено --- Да, это я заметил сразу, я думал когда ты подготавливал пример они такими стали) поэтому не упомянул. Но всеравно, они не позиционировались как надо вроде) --- Добавлено --- +