css 如何使条形图在达到100%时不超出图的边框尺寸?

5lhxktic  于 2023-03-09  发布在  其他
关注(0)|答案(2)|浏览(171)

从中心到左右两边的条形图都达到100%相等。但最后条形图有点超出Map边界。如何使条形图达到100%,但同时又只从内部到达Map边界?
酒吧的css

body
{
  margin:0px auto;
  padding:0px;
  font-family:helvetica;
}
.progress 
{
  position: relative;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #F2F2F2;
}
.bar 
{ 
  background-color: #819FF7; 
  width:0%; 
  height:5px; 
  border-radius: 3px;
  margin-left: 10%;
}
.percent 
{ 
  position:absolute; 
  display:inline-block; 
  top:3px; 
  left:48%; 
}
.center-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
}
#wrapper
{
  width:995px;
  padding:0px;
  margin:0px auto;
  font-family:helvetica;
  text-align:center;
}
h1
{
  text-align:center;
  font-size:35px;
  margin-top:60px;
  color:#A9BCF5;
}
h1 p
{
  text-align:center;
  margin:0px;
  font-size:18px;
  text-decoration:underline;
  color:grey;
}

Map的CSS

<style>#map
    {
        width: 1600px;
        height:850px;
        margin: 0;
        position: absolute;
        top: 48%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }
    
    #map.fullscreen {
        position: fixed;
        width:100%;
        height: 100%;
      }</style>

我试着在JSFidlle网站上创建一个演示,但它不起作用。根本不显示酒吧。
https://jsfiddle.net/q391jwdo/2/
这就是我所说的条形图超出Map边界的意思:

这就是我想做的:
在html文件中创建一个父div,并将Map和酒吧的div放入其中:

<div class="MyContainer">
  <div class='bar' id='bar1'></div>
  <div id="map"></div>
</div>

然后在酒吧的css文件中我添加了

.MyContainer
{
  width: 100%;
}

但现在该条位于屏幕的顶部。

6tqwzwtp

6tqwzwtp1#

你可以把div贴图放在一个大的div(parent)里面,把map放在里面,把bar放在大的div里面,给予它100%的宽度,因为它们在一个级别上!!

qv7cva1a

qv7cva1a2#

我觉得这个

<div class="MyContainer">
  <div class='bar' id='bar1'></div>
  <div id="map"></div>
</div>

就是你需要的,你只需要从你的类中移除margin-left: 10%,并将bar的width设置为100%,或者你可以做一些类似margin: 10%width: 80%的事情,比如this

相关问题