html - 像谷歌地图一样在侧面板旁边对齐 map

标签 html css dictionary resize

我想将我正在使用的 map 与我创建的侧面板对齐。

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

谷歌地图:https://www.google.com/maps/search/google+maps/@43.7953019,-79.3853072,12z/data=!3m1!4b1

我的 map :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>

最佳答案

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

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

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/

额外建议:不要设置明确的高度(高度: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

关于html - 像谷歌地图一样在侧面板旁边对齐 map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55601947/

上一篇：css - 需要给元素的边框加上border-radius

下一篇：css - 我如何对齐其他 flex 中的内容

相关文章：

css - 浏览器扩展中标识符/类名的最佳实践

c++ - 在 C++ 中删除多余的空格

dictionary - 当值是列表时，kotlin 向映射添加对

javascript - 事件跟踪不适用于 1 个链接，但所有其他没有 onclick 的工作

HTML DIV 高度冲突

php - Wordpress 作为 CMS，调用内容 Issue

java - 使用枚举键和不同值类型进行映射

css - 使用 valign : top 将 div 居中对齐

css:设置字体图标的比例(除了字体大小)

css - 如何在自定义操作中打开和隐藏 ng-bootstrap datepicker？

©2024 IT工具网  联系我们