html - 显示问题:阻止影响周围 div 的 css
问题描述
我在将 display.block CSS 应用到 div 内的 span 时遇到问题,它影响多个 div 并将其周围的所有内容移动到整个容器的左侧。在我的代码中,目标是将地址显示为一个块,但电话号码和号码仍然占据容器的整个水平宽度。我正在观看有关如何执行此操作的视频,并且该人似乎根本没有遇到此问题,而且我不确定我在哪里犯了错误。当我运行它时,我附上了页面的屏幕截图,显示了地址如何作为一个块移动,但它也会影响它旁边的所有内容,即使它们具有不同的类等。
function initMap() {
var seattle = {
lat: 47.608013,
lng: -122.335167
};
const map = new google.maps.Map(document.getElementById('map'), {
center: seattle,
zoom: 11,
mapTypeId: 'roadmap',
});
}
body {
font-family: Arial, Helvetica, sans-serif;
height: 100vh;
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100%;
}
.title {
position: absolute;
z-index: 100;
font-size: 50px;
font-weight: bold;
color: #333;
text-transform: uppercase;
top: 70px;
left: 25px;
border-radius: 25px;
border: 2px solid #333;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
}
.search-container {
border-radius: 30px;
position: absolute;
z-index: 100;
top: 155px;
left: 25px;
width: 400px;
height: 60px;
background-color: #454E53;
display: flex;
}
.search-container .search {
flex-grow: 1;
display: flex;
align-items: center;
padding-left: 20px;
padding-right: 20px;
}
.search-container input {
width: 100%;
font-size: 25px;
background-color: transparent;
border: none;
color: white;
}
.search-container input:focus {
outline: none;
}
.search i {
font-size: 25px;
color: white;
}
.stores-list-container {
width: 360px;
position: absolute;
z-index: 100;
background: white;
left: 25px;
top: 228px;
border-radius: 30px;
bottom: 20px;
display: flex;
overflow-y: hidden;
padding-bottom: 30px;
padding-left: 20px;
padding-right: 10px;
}
.store-address {
font-size: 18px;
color: #514C4D;
margin-top: 30px;
}
.store-address span {
display: block;
}
.store-phone-number {
color: #B5ADAD;
margin-top: 15px;
margin-bottom: 15px;
}
<!DOCTYPE html>
<html>
<head>
<title>John's Google Map Project</title>
<script src="js/store-data.js"></script>
<script src="js/index.js"></script>
<link rel="stylesheet" href="style/style.css">
<script src="https://kit.fontawesome.com/c939d0e917.js"></script>
</head>
<body>
<div class="title">Store Locator</div>
<div class="search-container">
<div class="search">
<input id="zip-code-input" type="text" placeholder="Enter Zip Code"/>
<i class="fas fa-search" aria-hidden="true"></i>
</div>
</div>
<div class="stores-list-container">
<div class="stores-list">
<div class="store-container">
<div class="store-address">
<span>9100 SE 42nd St</span>
<span> Mercer Island, WA 98040</span>
</div>
<div class="store-phone-number">555-555-5555</div>
<div class="store-number-container">
<div class="store-number">
1
</div>
</div>
</div>
</div>
</div>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=000000000000000000&callback=initMap"></script>
</body>
</html>
解决方案
那个问题与 无关display: block
,问题与bottom
财产有关。
从类中删除bottom
属性stores-list-container
,您的问题将得到解决。
function initMap() {
var seattle = {
lat: 47.608013,
lng: -122.335167
};
const map = new google.maps.Map(document.getElementById('map'), {
center: seattle,
zoom: 11,
mapTypeId: 'roadmap',
});
}
body {
font-family: Arial, Helvetica, sans-serif;
height: 100vh;
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100%;
}
.title {
position: absolute;
z-index: 100;
font-size: 50px;
font-weight: bold;
color: #333;
text-transform: uppercase;
top: 70px;
left: 25px;
border-radius: 25px;
border: 2px solid #333;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
}
.search-container {
border-radius: 30px;
position: absolute;
z-index: 100;
top: 155px;
left: 25px;
width: 400px;
height: 60px;
background-color: #454E53;
display: flex;
}
.search-container .search {
flex-grow: 1;
display: flex;
align-items: center;
padding-left: 20px;
padding-right: 20px;
}
.search-container input {
width: 100%;
font-size: 25px;
background-color: transparent;
border: none;
color: white;
}
.search-container input:focus {
outline: none;
}
.search i {
font-size: 25px;
color: white;
}
.stores-list-container {
width: 360px;
position: absolute;
z-index: 100;
background: white;
left: 25px;
top: 228px;
border-radius: 30px;
/* bottom: 20px; */
display: flex;
overflow-y: hidden;
padding-bottom: 30px;
padding-left: 20px;
padding-right: 10px;
}
.store-address {
font-size: 18px;
color: #514C4D;
margin-top: 30px;
}
.store-address span {
display: block;
}
.store-phone-number {
color: #B5ADAD;
margin-top: 15px;
margin-bottom: 15px;
}
<!DOCTYPE html>
<html>
<head>
<title>John's Google Map Project</title>
<script src="js/store-data.js"></script>
<script src="js/index.js"></script>
<link rel="stylesheet" href="style/style.css">
<script src="https://kit.fontawesome.com/c939d0e917.js"></script>
</head>
<body>
<div class="title">Store Locator</div>
<div class="search-container">
<div class="search">
<input id="zip-code-input" type="text" placeholder="Enter Zip Code"/>
<i class="fas fa-search" aria-hidden="true"></i>
</div>
</div>
<div class="stores-list-container">
<div class="stores-list">
<div class="store-container">
<div class="store-address">
<span>9100 SE 42nd St</span>
<span> Mercer Island, WA 98040</span>
</div>
<div class="store-phone-number">555-555-5555</div>
<div class="store-number-container">
<div class="store-number">
1
</div>
</div>
</div>
</div>
</div>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=000000000000000000&callback=initMap"></script>
</body>
</html>
推荐阅读
- visual-c++ - 如何在 Visual C++ 2010 中从键盘获取用户输入?
- r - 将栅格图层从月转换为年,然后合并
- php - 在 Laravel 控制器中获取请求时未显示 Ajax 发布数据
- azure-cosmosdb - Databricks 作业集群 CosmosDB Jar java.lang.SecurityException
- java - cvc-complex-type.2.4.c:匹配通配符是严格的,但找不到元素“aop:scoped-proxy”的声明
- elasticsearch - 共享主机 OutOfMemoryError 中的 Magento 2.4 Elasticsearch 问题
- python - 这种对列表的特定切片操作的时间和空间复杂度?
- c# - 如何将大图像文件上传到云资产管理服务(Cloudinary)?
- xml - 在 XPath 谓词中使用路径?
- c - 函数'atoi'的隐式声明?