Выровняйте карту рядом с боковой панелью, как карты Google

Я хотел бы выровнять свою карту, которую я использую, рядом с моей боковой панелью, которую я создал.

Я не совсем уверен, почему он не выравнивается правильно.

Карты Google: https://www.google.com/maps/search/google+maps/@43.7953019,-79.3853072,12z/data=!3m1!4b1

Моя карта: https://i.imgur.com/EC1ITux.jpg

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

*{
    margin: 0;
    padding: 0;
    font-family: 'raleway', sans-serif;
}

.panel-header{
    background:#F66158;
    width: 563px;
    height: 177px;
}

.panel-header h1{
    font-size: 62px;
    color:#FFFFFF;
    text-align: center;
    line-height: 127px;
}

.menu-buttons ul{
    list-style: none;
    margin: 0 auto;
    text-align: center;
}

.menu-buttons ul li{
    display: inline-block;
    margin: 0px 0px 0px 0px;
    width:279px;
    border-bottom: 5px solid transparent;
    font-size:18px;
}

.menu-active{
    border-bottom: 5px solid #FFFFFF !important;
    padding-bottom: 24px;
    width:279px;
}

.menu-buttons ul li a{
    color:#FFFFFF;
    font-family: raleway, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
}

.filter-settings{
    background:#D9D7D7;
    height: 94px;
    width: 563px;
}

.filters-applied{
    width: 49%;
    display: inline-block;
}

.filters-button{
    width: 49%;
    display: inline-block;
    vertical-align: top;

}

.filters-applied p{
    margin-left:30px;  
}

.filter-settings .filters-applied p:first-child{
    text-transform: uppercase;
    font-weight: 700;
    color:#656363;
    font-size:16px;
    margin-top:15px;
}

.filter-settings .filters-applied p:not(:first-child){
    font-weight: 300;
    color:#656363;
    font-size:16px;
}

.filters-button button{
    margin-top: 30px;
    margin-left: 110px;
    background:#7C7D7E;
    color:#FFFFFF;
    height:35px;
    width:112px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    box-shadow: 0px 3px 6px rgba(188,183,183, 0.67);
    position:relative;
    text-indent: 25px;
}

.filters-button button::before{
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    left:10px;
    top:5px;
    background-image: url('../images/filter-icon.png');
}

.filter-display{
    background-color: #707070;
    width: 563px;
    height: 41px;
}

.filter-display p{
    color: #ffffff;
    font-size:14px;
    text-transform: uppercase;
    margin-left: 30px;
    display: inline-block;
    line-height:41px;
}

.filter-display img{
    float:right;
    position:relative;
    margin-right:20px;
    margin-top:7px;
}

.filter-active{
    color:#A5C3F5;
    font-weight:500;
}

.burger-thumb{
    display: inline-block;
}

.burger-info{
    display: inline-block;
    vertical-align: top;
    margin-left:10px;
}

.store-capacity{
    display: inline-block;
    color:#808080;
    font-size:14px;
    border: 1px solid #707070;
    width:100px;
    height:20px;
    padding-top:4px;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
}

.store-rating{
    display: inline-block;
    position:relative;
    left:10px;
}

.burger-list{
    margin-left: 30px;
    margin-top:40px;
}

.burger-section{
    border-bottom: 1px solid #D8D6D6;
    padding-bottom:40px;
    width: 500px;
    margin-bottom:40px;
}

#store-name{
    color:#3B3A3A;
    font-weight:700;
    font-size:32px;
    margin-top:7px;
}

.store-desc{
    color:#8E8E8E;
    font-size:16px;
    position:relative;
    top:8px;
    font-weight:400;
}

.burger-list{
    max-height:900px;
    max-width:532px;
    overflow-y: scroll;
}


#parent-container{
    height:900px;
    width: 100%;
}

.side-panel{
    width:41% !important;
    height:500px;
}

#map{
    background-image: url('../images/map.png');
    min-height:1220px; 
    width:100%;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <title>PopularTO</title>
    <meta name = "viewport" content = "width=device-width, initial-scale=1">
    <link rel = "stylesheet" type = "text/css" media = "screen" href = "css/main.css">
    <link rel = "stylesheet" href = "https://use.typekit.net/bab3yao.css">
    <script src = "js/main.js"></script>
</head>
<body>
    <div id = "parent-container">
        <div class = "side-panel">
            <div class = "panel-header">
                <h1>PopularTO</h1>
                <div class = "menu-buttons">
                    <ul>
                        <li>
                            <a>Fries</a>
                        </li>
                        <li class = "menu-active">
                            <a>Burgers</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class = "filter-settings">
                <div class = "filters-applied">
                    <p>Filters Applied:</p>
                    <p>Organized by specific time</p>
                    <p>Organized by events</p>
                </div>
                <div class = "filters-button">
                    <button>Filters</button>
                </div>
            </div>
            <div class = "filter-display">
                <p>Sorting <span class = "filter-active">Burger</span> restaurants by <span class = "filter-active">price</span></p>
                <img src = "images/info-btn.png" height = "27" width = "27">
            </div>
            <div class = "burger-list">
                <div class = "burger-section">
                    <div class = "burger-thumb">
                        <img src = "images/burgers/five-guys.png" width = "168" height = "112"/>
                    </div>
                    <div class = "burger-info">
                        <p class = "store-capacity">Open Space</p>
                        <img src = "images/star-filled.png" height = "17" width = "17" class = "store-rating"/>
                        <img src = "images/star-filled.png" height = "17" width = "17" class = "store-rating"/>
                        <img src = "images/star-filled.png" height = "17" width = "17" class = "store-rating"/>
                        <img src = "images/star-filled.png" height = "17" width = "17" class = "store-rating"/>
                        <img src = "images/star-unfilled.png" height = "17" width = "17" class = "store-rating"/>
                        <p id = "store-name">Five Guys</p>
                        <p class = "store-desc">865 York Mills Rd, North York, ON M3B 1Y6</p>
                        <p class = "store-desc">Hours: 11:00AM - 10:00PM</p>
                    </div>
                </div>
                <div class = "burger-section">
                        <div class = "burger-thumb">
                            <img src = "images/burgers/rudy.png" width = "168" height = "112"/>
                        </div>
                        <div class = "burger-info">
                            <p class = "store-capacity">Crowded</p>
                            <img src = "images/star-filled.png" height = "17" width = "17" class = "store-rating"/>
                            <img src = "images/star-filled.png" height = "17" width = "17" class = "store-rating"/>
                            <img src = "images/star-filled.png" height = "17" width = "17" class = "store-rating"/>
                            <img src = "images/star-filled.png" height = "17" width = "17" class = "store-rating"/>
                            <img src = "images/star-unfilled.png" height = "17" width = "17" class = "store-rating"/>
                            <p id = "store-name">Rudy</p>
                            <p class = "store-desc">865 York Mills Rd, North York, ON M3B 1Y6</p>
                            <p class = "store-desc">Hours: 11:00AM - 10:00PM</p>
                        </div>
                    </div>
                    <div class = "burger-section">
                            <div class = "burger-thumb">
                                <img src = "images/burgers/burger-priest.png" width = "168" height = "112"/>
                            </div>
                            <div class = "burger-info">
                                <p class = "store-capacity">Crowded</p>
                                <img src = "images/star-filled.png" height = "17" width = "17" class = "store-rating"/>
                                <img src = "images/star-filled.png" height = "17" width = "17" class = "store-rating"/>
                                <img src = "images/star-filled.png" height = "17" width = "17" class = "store-rating"/>
                                <img src = "images/star-filled.png" height = "17" width = "17" class = "store-rating"/>
                                <img src = "images/star-unfilled.png" height = "17" width = "17" class = "store-rating"/>
                                <p id = "store-name">The Burger's Priest</p>
                                <p class = "store-desc">865 York Mills Rd, North York, ON M3B 1Y6</p>
                                <p class = "store-desc">Hours: 11:00AM - 10:00PM</p>
                            </div>
                        </div>
                    <div class = "burger-section">
                            <div class = "burger-thumb">
                                <img src = "images/burgers/le-swan.png" width = "168" height = "112"/>
                            </div>
                            <div class = "burger-info">
                                <p class = "store-capacity">Open Space</p>
                                <img src = "images/star-filled.png" height = "17" width = "17" class = "store-rating"/>
                                <img src = "images/star-filled.png" height = "17" width = "17" class = "store-rating"/>
                                <img src = "images/star-filled.png" height = "17" width = "17" class = "store-rating"/>
                                <img src = "images/star-filled.png" height = "17" width = "17" class = "store-rating"/>
                                <img src = "images/star-unfilled.png" height = "17" width = "17" class = "store-rating"/>
                                <p id = "store-name">Le Swan</p>
                                <p class = "store-desc">865 York Mills Rd, North York, ON M3B 1Y6</p>
                                <p class = "store-desc">Hours: 11:00AM - 10:00PM</p>
                            </div>
                    </div>
                    <div class = "burger-section">
                            <div class = "burger-thumb">
                                <img src = "images/burgers/le-swan.png" width = "168" height = "112"/>
                            </div>
                            <div class = "burger-info">
                                <p class = "store-capacity">Open Space</p>
                                <img src = "images/star-filled.png" height = "17" width = "17" class = "store-rating"/>
                                <img src = "images/star-filled.png" height = "17" width = "17" class = "store-rating"/>
                                <img src = "images/star-filled.png" height = "17" width = "17" class = "store-rating"/>
                                <img src = "images/star-filled.png" height = "17" width = "17" class = "store-rating"/>
                                <img src = "images/star-unfilled.png" height = "17" width = "17" class = "store-rating"/>
                                <p id = "store-name">Le Swan</p>
                                <p class = "store-desc">865 York Mills Rd, North York, ON M3B 1Y6</p>
                                <p class = "store-desc">Hours: 11:00AM - 10:00PM</p>
                            </div>
                    </div>
            </div>
        </div>  
        <div id = "map">
            <p></p>
        </div> 
    </div>    
</body>
</html>

html css dictionary resize

10.04.2019 00:00

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

648

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

По сути - это вопрос компоновки.

Спасибо за показ вашей работы/кода, но вы также можете разбить его на что-то, что не включает в себя маленькие кусочки значков и шрифтов.

layout explanation

Это действительно всего 3 элемента.

<main class = "app">

  <aside class = "sidebar">
    <ul>
      <li>thing</li>
    </ul>
  </aside>

  <section class = "map-area">
    <iframe src='something'></iframe>
  </section>

</main>

а дальше - как-то так:

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.app {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.sidebar {
  flex-basis: 260px;
  flex-shrink: 0; /* just one way to do it */
  height: 100%;
  overflow: auto;
  padding: 10px;
}

.map-area {
  flex-basis: 100%;
}

Затем вы помещаете свои компоненты в эти слоты. :)

Вместо того, чтобы думать о том, почему ваш текущий CSS не работает — я предлагаю вам подумать об идеальной ситуации, / а затем создать пример в песочнице, такой как jsfiddle или codepen, — и изучить flex-box. Удачи! :)

https://jsfiddle.net/sheriffderek/ckn5d41f/

бонусные предложения: не задавайте явную высоту (высота: 77 пикселей и т. д.). Пусть содержимое определяет высоту своего родителя. + Попробуйте некоторые другие варианты элементов. Это много разделов, которые нужно прочитать.

<main id = "parent-container">
    <aside class = "sidebar">
        <header class = "sidebar-header">
            <h1>PopularTO</h1>
            <nav class = "options">
                <ul class = "item-list">
                    <li class = "item">
                        <a class = "link">Fries</a>
                    </li>
                    <li class = "item active">
                        <a class = "link">Burgers</a>
                    </li>
                </ul>
            </nav>
       </header>
       ... etc.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

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

— 10.04.2019 19:34

@JordanBrown - я добавил еще несколько мыслей. :)

— 11.04.2019 02:11

Я запомню это. Я склонен этого не делать. Вы дали мне много хорошей информации.

— 11.04.2019 20:38

10.04.2019 00:51