动态占据空间并使宽度相等

Question

如何在不修改HTML dom的情况下向我显示预期结果。

两个页面都将显示page 1布局。但是，在HTML2 2上，child2包含空内容。

我期望HTML2应显示第2页布局。

是否可以通过CSS实现此目的。 感谢

预期结果

HTML 1

    <div name="parent">
       <div name="child1">SOMETHING_INSIDE</div>
       <div name="child2">SOMETHING_INSIDE</div>
    </div>

HTML 2

    <div name="parent">
       <div name="child1">SOMETHING_INSIDE</div>
       <div name="child2"></div>
    </div>

CSS规则

    div[name="parent"] {
        display: flex;
        div {
            display: flex;
            flex-grow: 1;
        }
    }

Answer 1

使用flex-grow: 1，并且flex-basis默认为auto，可用空间在其内容总和被撤销后平均分配，这意味着即使是空的弹性项将占用空间，除非child1中的内容足够大，可以全部使用，例如此样本：

div[name="parent"] {
  display: flex;
}

div[name="parent"] div {
  display: flex;
  flex-grow: 1;
  border: 1px solid red;
}

Page 1
<div name="parent">
  <div name="child1">SOMETHING_INSIDE</div>
  <div name="child2">SOMETHING_INSIDE</div>
</div>

Page 2
<div name="parent">
  <div name="child1">SOMETHING_INSIDE</div>
  <div name="child2"></div>
</div>

<br><br>

Page 1
<div name="parent">
  <div name="child1">SOMETHING_INSIDE SOMETHING_INSIDE SOMETHING_INSIDE SOMETHING_INSIDE
  </div>
  <div name="child2">SOMETHING_INSIDE</div>
</div>

Page 2
<div name="parent">
  <div name="child1">SOMETHING_INSIDE SOMETHING_INSIDE SOMETHING_INSIDE SOMETHING_INSIDE
  </div>
  <div name="child2"></div>
</div>

在这种情况下，您可以使用:empty选择器并将空的设置为display: none

div[name="parent"] {
  display: flex;
}

div[name="parent"] div {
  display: flex;
  flex-grow: 1;
  border: 1px solid red;
}

div[name="parent"] div:empty {
  display: none;
}

Page 1
<div name="parent">
  <div name="child1">SOMETHING_INSIDE</div>
  <div name="child2">SOMETHING_INSIDE</div>
</div>

<br> Page 2
<div name="parent">
  <div name="child1">SOMETHING_INSIDE</div>
  <div name="child2"></div>
</div>

如果你还想确保，当两者都有内容时，它们总是相等（50％/ 50％），你可以将flex-basis设置为0

div[name="parent"] {
  display: flex;
}

div[name="parent"] div {
  display: flex;
  flex-grow: 1;
  border: 1px solid red;
}

.equal-width div {
  flex-basis: 0;
}

Page 1
<div name="parent">
  <div name="child1">SOMETHING_INSIDE SOMETHING_INSIDE SOMETHING_INSIDE</div>
  <div name="child2">SOMETHING_INSIDE</div>
</div>

<br> Page 2
<div name="parent" class="equal-width">
  <div name="child1">SOMETHING_INSIDE SOMETHING_INSIDE SOMETHING_INSIDE</div>
  <div name="child2">SOMETHING_INSIDE</div>
</div>

Answer 2

有趣的问题，但我认为无法根据空内容省略弹性项目。您当然可以使用js并将显示设置为none：

<?php

use Zend\Db\Adapter\Driver\ResultInterface;
use Zend\Db\ResultSet\ResultSet;

$statement = $driver->createStatement('SELECT * FROM users');
$statement->prepare();
$result = $statement->execute($parameters);

if ($result instanceof ResultInterface && $result->isQueryResult()) {
  $resultSet = new ResultSet;
  $resultSet->initialize($result);

  foreach ($resultSet as $row) {
    echo $row->my_column . PHP_EOL;
  }
}

?>

一旦Flex项目不可见，另一个flex项目将增长到占用var el = document.getElementById('myElement'); if (el.innerHTML === "") el.style.display = "none"; 的所有容器空间。

我重新安排了你的代码，因为它似乎有无效的css，并添加了一个边框，以便我们可以看到两个flex项目。尝试在child2上手动设置flex-grow:1以查看child1是否增长到全宽。

＆＃13;

＆＃13;

style="display:none"

＆＃13;

window.onload = function() {
  document.getElementById("toggle").addEventListener("click",   function(){
    toggleChild();
  });

  updateDivs();
};

toggleChild = function() {
  var divs = document.getElementsByClassName('child');
  if (divs[1].innerHTML == "") {
    divs[1].innerHTML = "SOMETHING_INSIDE";
    divs[1].style.display = "block";
  }
  else {
    divs[1].innerHTML = "";
    divs[1].style.display = "none";
  }
}

updateDivs = function() {
  var divs = document.getElementsByClassName('child');
  for (var i = 0; i < divs.length; i++) {
      if (divs[i].innerHTML == "") {
        divs[i].style.display = "none";
      }
  }
}

＆＃13;

div.parent {
  display:flex;
  width:100vw;
}     

div.parent div {
  flex-grow:1;
  border:1px solid black;
}

#toggle {
  margin:8px 0px 8px 0px;
  cursor:pointer;
}

＆＃13;

＆＃13;

＆＃13;

修改

我在代码段中添加了一个切换按钮，以显示1或2列布局。