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

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

0 голосов
/ 10 апреля 2019

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

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

Карты 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>

1 Ответ

1 голос
/ 10 апреля 2019

По сути - это вопрос раскладки.

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

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

...