降低容器高度时，将元素放入其容器中

编程问答 2023-03-30

问题描述

我在SVG中也有一排SVG框，其背景为矩形。 （我需要他们像这样）

这是.main-container的宽度为width: 300px;时的代码

@font-face {
  font-family: "Heebo-Light";
  src: url(Heebo-Light.ttf) format("truetype");
}

svg {
    position: relative;
    display: block;
    overflow: visible;
    pointer-events: none;
}


body {
  background-color: #FDFDFD;
  overflow: hidden;
}

.box svg:nth-of-type(1) {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
 
}

.box svg:nth-of-type(2) {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;

}

.subbox-container {
  display: flex;
  flex-direction: column;
  gap: 3px;

   
}

.main-container {

  width: 300px; 
  gap: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  align-content: center;
  overflow: hidden;
  margin: 0 auto;
  border: 1px dashed;

}

.background-rectangle {
  transform: translate(3.21vw,-3.18vh); 
}

.box-container {
  position: relative;
  transform: translate(-3.21vw);
  min-width: 0;
  min-height: 0;


}


.box,.background-rectangle,svg {
  max-width: 100%;
  max-height: 100%;

}
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="style.css"> 
</head>

<body> 

<div class="main-container">


    <!-- box-container start -->

    <div id="box-container-1" class="box-container">

    <div class="subbox-container">

        <!-- Start Box -->
        <div class ="box" style="min-width: 0; min-height: 0; margin: 0; z-index: 4; width: 15.54vw; height: 5.59vh; opacity: 1; transform-origin: 8.39vw 2.79vh; transform: translate(3.21vw,11vh) rotate(0deg) scale(1,1);" aria-label="do you ever">

            <svg height="5.59vh" width="15.54vw" viewBox="0 0 172 45">
                <text font-family="Heebo-Light" font-size="24px" fill="#595959" fill-opacity="1" x="50%" y="53%" dominant-baseline="middle" text-anchor="middle">
                  <tspan>do you ever</tspan>
               </text> 
            </svg>

            <svg height="5.59vh" width="15.54vw" viewBox="0 0 272 45" preserveAspectRatio="none">

                <defs>

                   <linearGradient gradientTransform="rotate(90,0.5,0.5)" id="uniqueDomId-1114">
                      <stop offset="0%" stop-color="#AFAFAF" stop-opacity="1"></stop>
                      <stop offset="0%" stop-color="#F5F3F8" stop-opacity="1"></stop>
                      <stop offset="69.804%" stop-color="#F9F9F9" stop-opacity="1"></stop>
                      <stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"></stop>
                   </linearGradient>

                   <filter id="uniqueDomId-1115" filterUnits="userSpaceOnUse" x="-15.75" y="-15.75" width="303.5" height="76.5">
                      <feFlood result="floodOut" flood-color="#CCC1DA" flood-opacity="0.29"></feFlood>
                      <feGaussianBlur result="gaussOut" in="SourceAlpha" stdDeviation="2.450000047683716,2.450000047683716">
                      </feGaussianBlur>
                      <feComposite in="floodOut" in2="gaussOut" operator="in"></feComposite>
                   </filter>

                </defs>

                <use transform="translate(-2.72,-0.45) scale(1.0199999809265137,1.0199999809265137) translate(0,0)" xlink:href="#uniqueDomId-1116" filter="url(#uniqueDomId-1115)" data-angle="0" data-distance="0" data-height="45" data-scale="1.02" data-adornment-type="drop-shadow" data-width="272" data-transform="[{&quot;type&quot;:&quot;translate&quot;,&quot;args&quot;:[-2.72,-0.45]},{&quot;type&quot;:&quot;scale&quot;,&quot;args&quot;:[1.0199999809265137,1.0199999809265137]}]"></use>

                <g id="uniqueDomId-1116">
                   <g id="uniqueDomId-1117">
                      <path d="M0,0L272,0 272,45 0,45z" id="uniqueDomId-1118" fill="url(#uniqueDomId-1114)"></path>
                   </g>
                   
                </g>
            </svg>
        </div>
        <!-- End Box -->


        <!-- Start Box -->
        <div class ="box" style="min-width: 0; min-height: 0; margin: 0; z-index: 4; width: 15.54vw; height: 5.59vh; opacity: 1; transform-origin: 8.39vw 2.79vh; transform: translate(3.21vw,45z" id="uniqueDomId-1118" fill="url(#uniqueDomId-1114)"></path>
                   </g>
                   
                </g>
            </svg>
        </div>
        <!-- End Box -->

    </div>

    <!-- background rectangle -->
    <div class="background-rectangle" style="min-width: 0; min-height: 0; height: 16.81vh; width: 15.54vw;">
        <svg height="16.81vh" width="15.54vw" viewBox="0 0 272 186" data-commandset-id="35" preserveAspectRatio="none">
            <g >
                <path d="M259.147003,1E-06C266.245483,-1.2E-05 271.999939,5.754436 271.999969,12.852937 271.999969,12.85294 271.999969,12.852942 271.999969,12.852945L271.999969,171.147034C271.999969,178.245529 266.245514,183.999985 259.147034,183.999985L259.147034,183.999985L12.852946,183.999985C5.754463,183.999985 3E-06,178.245529 0,171.147049L0,12.85295C-5E-06,5.754468 5.754446,7E-06 12.852927,-1E-06z" id="uniqueDomId-1466" fill="#E6E0EC" fill-opacity="0.7" stroke-width="1" stroke="#CCC1DA" stroke-opacity="0.14" stroke-linecap="flat" stroke-linejoin="round" data-stroke-sharpened="true" transform="translate(0.5,0.5)"></path>
            </g>
        </svg>
    </div>

    </div>

    <!-- box-container end -->


</div> <!-- main container end-->


<script src="script.js"></script>
</body>

</html>

到目前为止，当您将width的{​​{1}}减小到.main-container之类时，所有元素都适合新容器的宽度。这是可以接受的行为。

所以50px与.main-container的结果 

width: 50px;
@font-face {
  font-family: "Heebo-Light";
  src: url(Heebo-Light.ttf) format("truetype");
}

svg {
    position: relative;
    display: block;
    overflow: visible;
    pointer-events: none;
}


body {
  background-color: #FDFDFD;
  overflow: hidden;
}

.box svg:nth-of-type(1) {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
 
}

.box svg:nth-of-type(2) {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;

}

.subbox-container {
  display: flex;
  flex-direction: column;
  gap: 3px;

   
}

.main-container {

  width: 50px;  
  gap: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  align-content: center;
  overflow: hidden;
  margin: 0 auto;
  border: 1px dashed;

}

.background-rectangle {
  transform: translate(3.21vw,svg {
  max-width: 100%;
  max-height: 100%;

}

问题是，即使您减小容器的高度，我也要在容器中放入该行。现在，如果没有足够的高度，整个容器就会溢出。

因此，如果我们将<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="main-container"> <!-- box-container start --> <div id="box-container-1" class="box-container"> <div class="subbox-container"> <!-- Start Box --> <div class ="box" style="min-width: 0; min-height: 0; margin: 0; z-index: 4; width: 15.54vw; height: 5.59vh; opacity: 1; transform-origin: 8.39vw 2.79vh; transform: translate(3.21vw,0.5)"></path> </g> </svg> </div> </div> <!-- box-container end --> </div> <!-- main container end--> <script src="script.js"></script> </body> </html> 的高度设置为.main-container 

height: 20px;
@font-face {
  font-family: "Heebo-Light";
  src: url(Heebo-Light.ttf) format("truetype");
}

svg {
    position: relative;
    display: block;
    overflow: visible;
    pointer-events: none;
}


body {
  background-color: #FDFDFD;
  overflow: hidden;
}

.box svg:nth-of-type(1) {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
 
}

.box svg:nth-of-type(2) {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;

}

.subbox-container {
  display: flex;
  flex-direction: column;
  gap: 3px;

   
}

.main-container {
  
  height: 20px;
  /*width: 300px;*/ 
  gap: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  align-content: center;
  margin: 0 auto;
  border: 1px dashed;

}

.background-rectangle {
  transform: translate(3.21vw,svg {
  max-width: 100%;
  max-height: 100%;

}

我们应该看到虚线容器内的整个盒子都没有溢出。

我所缺少的以及如何解决？！

请帮助我，我真的很困惑为什么这行不通？！我尽力使宽度起作用，但高度却完全不同且出乎意料：（

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html

相关问答

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起...
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct...