Question

元素没有调整大小，浏览器没有重新计算元素的位置，即使所有宽度和高度仅以百分比形式提到。这段代码基本上呈现了一个Squared DIV，它有两个元素，一个是Centered，另一个是右边的SQuare。

        <html>
        <head>
            <style>
                .board {
                    font-size: 8em;
                }

                .cellContainerOuter {
                    width: 100%;
                    padding-bottom: 100%;
                    position: relative;
                    background-color: yellow;
                    border: 1px solid black;
                }

                .cellContainer {
                    width: 100%;
                    padding-bottom: 100%;
                    position: absolute;
                    display: table;
                }

                .cellContainerInner {
                    padding-bottom: 50%;
                    padding-top: 50%;
                    padding-left: 50%;
                    padding-right: 50%;
                    position: relative;
                    display: table-cell;
                    text-align: center;
                    vertical-align: middle;
                }

                .text {
                    border: 0px dotted white;
                    position: absolute;
                    bottom: 20%;
                    top: 20%;
                    left: 20%;
                    right: 20%;
                    overflow: hidden;
                    text-overflow: clip;

                    display: block;
                }

                .weight {
                    position: absolute;
                    right: 0px;
                    top: 0px;
                    margin: 2px;
                    border: 1px solid white;
                }
            </style>
        </head>
        <body>
            <div class="board">
                <div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
                    <div id="cell2_C_1" class="cellContainer" title="ఇ">
                        <div id="cell_C_1" class="cellContainerInner" title="ఇ">
                            <span id="weight_C_1" class="weight" title="6">6</span>
                            <span id="text_C_1" class="text" title="ఇ">ఇ</span>
                        </div>
                    </div>
                </div>
            </div>
        </body>
        </html>

非常感谢您解决此问题的任何帮助。

CodePen：https://codepen.io/mdileep/full/MGrNgw/

Answer 1

重构你的CSS。

如果这是您期望的行为，请告诉我。或者响应你意味着改变你的身高6？

＆＃13;

body {
  margin: 0;
}

.cellContainer {
  position: relative;
  background: yellow;
  width: calc(100vw - 20px);
  height: calc(100vh - 20px);
  margin: 10px;
}

.cellContainerInner {
  border: 1px solid;
  height: 100%;
  display: flex;
}

.weight {
  font-size: 8em;
  position: absolute;
  right: 0px;
  top: 0px;
  border: 1px solid;
}

.text {
  flex: 1;
  font-size: 8em;
  /*   border:2px solid; */
  align-self: center;
  text-align: center;
}

＆＃13;

<div class="board">
  <div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
    <div id="cell2_C_1" class="cellContainer" title="ఇ">
      <div id="cell_C_1" class="cellContainerInner" title="ఇ">
        <span id="weight_C_1" class="weight" title="6">6</span>
        <span id="text_C_1" class="text" title="ఇ">ఇ</span>
      </div>
    </div>
  </div>
</div>

＆＃13;

绝对定位元素的大小调整

1 个答案: