像谷歌地图一样在侧面板旁边对齐地图答案

【问题标题】：Align map beside side panel like google maps像谷歌地图一样在侧面板旁边对齐地图
【发布时间】：2019-04-09 22:00:54
【问题描述】：

我想在我创建的侧面板旁边对齐我正在使用的地图。

我不太确定为什么它没有正确对齐。

谷歌地图：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

【解决方案1】：

核心 - 这是一个布局问题。

感谢您展示您的工作/代码 - 而且，您可以将其分解为不涉及少量图标和字体的内容。

实际上只有 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/

奖励建议：不要设置显式高度（高度：77px 等）让内容决定其父级的高度。 + 尝试其他一些元素选项。 有很多 div 需要通读。

<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 代替。我以前学过，但从未付诸实践。
@JordanBrown - 我又添加了一些想法。 :)
我会记住这一点。我倾向于不这样做。你给了我很多很好的信息。