За последние 24 часа нас посетили 20563 программиста и 1130 роботов. Сейчас ищут 719 программистов ...

DOCTYPE html ломает flex #WTF

Тема в разделе "HTML и CSS", создана пользователем TeslaFeo, 30 окт 2017.

  1. TeslaFeo

    TeslaFeo Старожил

    С нами с:
    9 мар 2016
    Сообщения:
    2.989
    Симпатии:
    759
    Приветствую, уважаемые форумчане!
    При создании html документа пролюбил в начале <!DOCTYPE html>
    и пилил себе кусок странички.
    Позже прописал doctype в начало странички и всё солмалось. А именно - flex.
    Вот так выглядит страница без <!DOCTYPE html> (как и ожидается)
    [​IMG]
    Вот так с <!DOCTYPE html>
    [​IMG]

    HTML:
    1. <!DOCTYPE html>
    2.     <head>
    3.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    4.         <title>Hotels</title>
    5.         <link rel="stylesheet" href="css/reset.css" />
    6.         <link rel="stylesheet" href="css/style.css" />
    7.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    8.         <script src="js/scripts.js"></script>
    9.     </head>
    10.     <body>
    11.         <div class="hotels">
    12.             <div class="hotel">
    13.                 <h4>Название отеля</h4>
    14.                 <div class="HotelFoto">
    15.                    
    16.                 </div>
    17.                 <div class="HotelCont">
    18.                     <div class="select">
    19.                         <p>Дополнительное место:</p>
    20.                         <p>
    21.                             <select>
    22.                                 <option>1</option>
    23.                                 <option>2</option>
    24.                                 <option>3</option>
    25.                             </select><span>&#9660;</span>
    26.                         </p>
    27.                     </div>
    28.                     <div class="select">
    29.                         <p>Количество номеров:</p>
    30.                         <p>
    31.                             <select>
    32.                                 <option>1</option>
    33.                                 <option>2</option>
    34.                             </select><span>&#9660;</span>
    35.                         </p>
    36.                     </div>
    37.                     <div class="radios">
    38.                         <div class="price">
    39.                             <p>2555 &#8381; <br/>
    40.                                 <span>Цена за одну ночь/ночей</span>
    41.                             </p>
    42.                         </div>
    43.                         <label><input type="radio" name="typeprice" /><span></span> <b>Только размещение</b></label>
    44.                         <label><input type="radio" name="typeprice" /><span></span> <b>Завтрак включен</b></label>
    45.                         <label><input type="radio" name="typeprice" disabled /><span></span> <b>Полупансион</b></label>
    46.                         <label><input type="radio" name="typeprice" disabled /><span></span> <b>Полный пансион</b></label>
    47.                     </div>
    48.                     <div class="buttons">
    49.                         <input type="button" class="DostBut" value="Доступность" />
    50.                         <input type="button" class="PodrBut" value="Подробнее" />
    51.                         <input type="button" class="BronBut" value="Забронировать" />
    52.                     </div>
    53.                 </div>
    54.             </div>
    55.             <div class='hotel'>
    56.                
    57.             </div>
    58.             <div class='hotel'>
    59.                
    60.             </div>
    61.         </div>
    62.     </body>
    63. </html>
    Код (CSS):
    1. *{
    2.  
    3. margin:0;
    4. padding:0;
    5. box-sizing:border-box;
    6.  
    7. }
    8.  
    9. input:focus, textarea:focus, button:focus, select:focus {
    10.  
    11. outline:none;
    12.  
    13. }
    14.  
    15. .hotels {
    16. /*
    17. height:100%;*/
    18. margin:auto;
    19. max-width:1000px;
    20. box-shadow:0 0 3px #000;
    21. padding:5px 10px;
    22.  
    23. }
    24.  
    25. .hotel {
    26.  
    27. padding:5px;        box-shadow:0 0 10px #000;
    28. margin:10px 5px;
    29. display:flex;
    30. justify-content:space-around;
    31. flex-wrap:wrap;
    32.  
    33. }
    34.  
    35. .hotel h4 {
    36.  
    37. width:100%;
    38. padding:10px 20px;
    39. color:#555;
    40. background:#d8d8d8;
    41.  
    42. }
    43.  
    44. .hotelFoto {
    45.  
    46. flex-grow:1;    box-shadow:0 0 10px #000;    background-color:#f00;width:400px;
    47. flex-basis:400px;
    48. background-image:url(../img/foto1.jpg);
    49. background-position:center center;
    50. background-size:cover;
    51. height:400px;
    52. margin:5px;
    53.  
    54. }
    55.  
    56. .hotelCont {
    57.  
    58. flex-basis:400px;    box-shadow:inset 0 0 10px #000;
    59. flex-grow:2;
    60. height:400px;
    61. margin:5px;
    62. display:flex;
    63. justify-content:space-around;
    64. flex-wrap:wrap;
    65. align-items:flex-start;
    66.  
    67. }
     
  2. mahmuzar

    mahmuzar Старожил

    С нами с:
    6 апр 2012
    Сообщения:
    4.632
    Симпатии:
    425
    Адрес:
    РД, г. Махачкала.
    Я не пробовал никогда без доктайпа).
    А так фотки отвалились кажется, интересно взглянуть че там.
    бегло взгялунл на css не вижу чтобы ты задавал display: flex
    --- Добавлено ---
    А, все теперь увидел) Один глаз косит, извиняй)
    --- Добавлено ---
    Устал маленько)
     
  3. TeslaFeo

    TeslaFeo Старожил

    С нами с:
    9 мар 2016
    Сообщения:
    2.989
    Симпатии:
    759
    [​IMG]
    [​IMG]
     
  4. TeslaFeo

    TeslaFeo Старожил

    С нами с:
    9 мар 2016
    Сообщения:
    2.989
    Симпатии:
    759
  5. mahmuzar

    mahmuzar Старожил

    С нами с:
    6 апр 2012
    Сообщения:
    4.632
    Симпатии:
    425
    Адрес:
    РД, г. Махачкала.
    Код (CSS):
    1.             body{
    2.  
    3.                 margin:0;
    4.                 padding:0;
    5.                 box-sizing:border-box;
    6.  
    7.             }
    8.  
    9.             input:focus, textarea:focus, button:focus, select:focus {
    10.  
    11.                 outline:none;
    12.  
    13.             }
    14.  
    15.             .hotels {
    16.                 /*
    17.                 height:100%;*/
    18.                 margin:auto;
    19.                 max-width:1000px;
    20.                 box-shadow:0 0 3px #000;
    21.                 padding:5px 10px;
    22.  
    23.             }
    24.  
    25.             .hotel {
    26.  
    27.                 padding:5px;        box-shadow:0 0 10px #000;
    28.                 margin:10px 5px;
    29.                 display:flex;
    30.                 flex-flow: column;
    31.                 flex-basis: 100%;
    32.                 height: 500px;
    33.             }
    34.  
    35.             .hotel h4 {
    36.  
    37.                 width: auto;
    38.                 padding:10px 20px;
    39.                 color:#555;
    40.                 background:#d8d8d8;
    41.  
    42.                 margin: 0;
    43.             }
    44.  
    45.             .HotelFoto {
    46.                 display: flex;
    47.                 background-color:#f00;
    48.  
    49.                 background-image: url(m.jpg);
    50.                 background-position:center center;
    51.                 background-size:cover;
    52.                 margin:5px;
    53.                 flex: 0 1 auto;
    54.                 width: 500px;
    55.  
    56.             }
    57.  
    58.             .hotel-options {
    59.                 box-shadow:inset 0 0 10px #000;
    60.                 margin:5px;
    61.                 display:flex;
    62.                 flex-flow: wrap;
    63.                 flex: 0 2 auto;
    64.             }
    65.            
    66.             .hotel-cont{
    67.                 display: flex;
    68.                 flex-basis: 100%;
    69.             }
    HTML:
    1. <!DOCTYPE html>
    2.     <head>
    3.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    4.         <title>Hotels</title>
    5.  
    6.        
    7.     </head>
    8.     <body>
    9.         <div class="hotels">
    10.             <div class="hotel">
    11.                 <h4>Название отеля</h4>
    12.                 <div class="hotel-cont">
    13.  
    14.                     <div class="HotelFoto">
    15.  
    16.                     </div>
    17.  
    18.                     <div class="hotel-options">
    19.                         <div class="select">
    20.                             <p>Дополнительное место:</p>
    21.                             <p>
    22.                                 <select>
    23.                                     <option>1</option>
    24.                                     <option>2</option>
    25.                                     <option>3</option>
    26.                                 </select><span>&#9660;</span>
    27.                             </p>
    28.                         </div>
    29.                         <div class="select">
    30.                             <p>Количество номеров:</p>
    31.                             <p>
    32.                                 <select>
    33.                                     <option>1</option>
    34.                                     <option>2</option>
    35.                                 </select><span>&#9660;</span>
    36.                             </p>
    37.                         </div>
    38.                         <div class="radios">
    39.                             <div class="price">
    40.                                 <p>2555 &#8381; <br/>
    41.                                     <span>Цена за одну ночь/ночей</span>
    42.                                 </p>
    43.                             </div>
    44.                             <label><input type="radio" name="typeprice" /><span></span> <b>Только размещение</b></label>
    45.                             <label><input type="radio" name="typeprice" /><span></span> <b>Завтрак включен</b></label>
    46.                             <label><input type="radio" name="typeprice" disabled /><span></span> <b>Полупансион</b></label>
    47.                             <label><input type="radio" name="typeprice" disabled /><span></span> <b>Полный пансион</b></label>
    48.                         </div>
    49.                         <div class="buttons">
    50.                             <input type="button" class="DostBut" value="Доступность" />
    51.                             <input type="button" class="PodrBut" value="Подробнее" />
    52.                             <input type="button" class="BronBut" value="Забронировать" />
    53.                         </div>
    54.                     </div>
    55.                 </div>
    56.             </div>
    57.             <div class='hotel'>
    58.  
    59.             </div>
    60.             <div class='hotel'>
    61.  
    62.             </div>
    63.         </div>
    64.     </body>
    65. </html>
    Как-то так.
    А почему не jsfiddle)/
    --- Добавлено ---
    Я стили и js файлы твои открепил, тебе их придется прописывать заново, и картинку в css)
    --- Добавлено ---
    Картинку я бы не грузил через css, правда не знаю почему ты так делешь, можешь есть такая необходимость.
    --- Добавлено ---
    Кстати, я тестировал через последние версии google chrome и firefox
     
    TeslaFeo нравится это.
  6. TeslaFeo

    TeslaFeo Старожил

    С нами с:
    9 мар 2016
    Сообщения:
    2.989
    Симпатии:
    759
    вся проблема была в том, что я днище мрачное. :D
    косяк был в регистре названия классов :cool:
    --- Добавлено ---
    доктайп надо писать сразу, чтобы косяки вылазили по пути.
     
    #6 TeslaFeo, 30 окт 2017
    Последнее редактирование: 30 окт 2017
  7. TeslaFeo

    TeslaFeo Старожил

    С нами с:
    9 мар 2016
    Сообщения:
    2.989
    Симпатии:
    759
    он говорит "убери теги html head..." и т д
    ни когда не думал об этом.
    Типа грузится сначала css файл, а потом уже картинка и дольше получается в итоге?
     
  8. mahmuzar

    mahmuzar Старожил

    С нами с:
    6 апр 2012
    Сообщения:
    4.632
    Симпатии:
    425
    Адрес:
    РД, г. Махачкала.
    Не, просто конкретно тут я подумал удобнее эти картинки держать в html. Да и с флексами когда играешься есть плюс. ))
    --- Добавлено ---
    Да, это я заметил сразу, я думал когда ты подготавливал пример они такими стали) поэтому не упомянул. Но всеравно, они не позиционировались как надо вроде)
    --- Добавлено ---
    +