Question

我在div中有这些按钮，他们的css如下：

div {
    font-size: 5vw;
    font-family: Calibri, Helvetica, sans-serif;
}
div.IFlexible {
    display:flex;    
}
div.yesno {
    position: absolute;
    bottom: 4vw;
}
div > button{
    font-size: 5vw;
    flex-grow: 1;
}

<div class="yesno IFlexible">
    <button id="addNewOK" class="confirmBut">Confirm</button>
    <button id="addNewCancel" class="confirmBut">Cancel</button>
</div>

除了这些按钮之外别无其他。

我的目的是让按钮位于屏幕的底部，同时拉伸它们以占据均匀的空间并占据所有空间。问题是，我该怎么办？

Answer 1

将With Range("J2:J" & LastRow) .Formula = "=IF(VLOOKUP(A2&""B2"",MARM!A:G,7,0)=0,"""",VLOOKUP(A2&""B2"",MARM!A:G,7,0))" .Value = .Value End With属性更改为flex-grow，并将flex width添加到100%：

div.IFlexible

* {margin: 0; padding: 0; box-sizing: border-box}
html, body {width: 100%}

div {
  font-size: 5vw;
  font-family: Calibri, Helvetica, sans-serif;
}

div.IFlexible {
  display: flex;
  width: 100%; /* added */
}

div.yesno {
  position: absolute;
  bottom: 4vw;
}

div > button {
  font-size: 5vw;
  flex: 1; /* modified */
}

Answer 2

您也可以使用多列css https://www.w3.org/TR/css3-multicol/

＆＃13;

div {
    font-size: 5vw;
    font-family: Calibri, Helvetica, sans-serif;
}
div.IFlexible {
    column-count:2;
      
}
div.yesno {
    position: absolute;
    bottom: 4vw;
  left:4vw;
  right:4vw;
}
div > button{
    font-size: 5vw;
    width:100%;
}

＆＃13;

<div class="yesno IFlexible">
    <button id="addNewOK" class="confirmBut">Confirm</button>
    <button id="addNewCancel" class="confirmBut">Cancel</button>
</div>

＆＃13;

你也可以使用display：grid;

＆＃13;

div {
    font-size: 5vw;
    font-family: Calibri, Helvetica, sans-serif;
}
div.IFlexible {
    display:grid;
  grid-template-columns:1fr 1fr;
  grid-gap:4vw
      
}
div.yesno {
    position: absolute;
    bottom: 4vw;
  left:4vw;
  right:4vw;
}
div > button{
    font-size: 5vw;
    width:100%;
}

＆＃13;

<div class="yesno IFlexible">
    <button id="addNewOK" class="confirmBut">Confirm</button>
    <button id="addNewCancel" class="confirmBut">Cancel</button>
  
</div>

＆＃13;

实际上你只需要调整容器的大小，通过coordonates将比宽度更容易：

＆＃13;

div {
    font-size: 5vw;
    font-family: Calibri, Helvetica, sans-serif;
}
div.IFlexible {
    display:flex;    
}
div.yesno {
    position: absolute;
    bottom: 4vw;
  left:1vw;
  right:1vw;
}
div > button{
    font-size: 5vw;
    flex-grow: 1;
}

＆＃13;

<div class="yesno IFlexible">
    <button id="addNewOK" class="confirmBut">Confirm</button>
    <button id="addNewCancel" class="confirmBut">Cancel</button>
</div>

＆＃13;

Answer 3

您可以强制按钮占据整个宽度（每个按钮50％的空间），为每个按钮指定50％的宽度，并为它们所在的div指定100％的宽度。

div {
    font-size: 5vw;
    font-family: Calibri, Helvetica, sans-serif;
}
div.IFlexible {
    display:flex;
    width: 100%;
}
div.yesno {
    position: absolute;
    bottom: 4vw;
}
div > button{
    font-size: 5vw;
    flex-grow: 1;
    width: 50%
}

希望这有帮助

Flex显示与绝对定位冲突

3 个答案: