Question

我想根据可用的元素更改我的网页布局。

在某些情况下，绿色元素存在，而在其他情况下则不存在。我想要改变布局，如下图所示（不使用绝对定位）。

这可能吗？

图片： Layout change

谢谢！

编辑：

我只使用了HTML和CSS
我通过在蓝色元素上使用位置绝对来使它工作，但它不会影响红色元素的宽度。
绿色元素是否不在DOM中或者是否显示无关紧要：无

Answer 1

可以使用flexbox。这是一个例子：

代码：

#container {
  display: flex;
  flex-wrap: wrap;
}

#red {
  height: 30px;
  background-color: red;
  width: 80%;
  flex: 1 0 80%;
  /* this set a base width of 80%, but can grow */
}

#green {
  height: 30px;
  background-color: green;
  width: 80%;
}

#blue {
  height: 30px;
  background-color: blue;
  width: 20%;
}

<div id="container">
  <div id="red"></div>
  <div id="green"></div>
  <div id="blue"></div>
</div>

您可以将display: none设置为绿色div，您将获得想要实现的目标

这是jsfiddle

Answer 2

如果绿色元素仍然存在且为空，则可以使用：empty伪选择器选择不包含任何内容或仅包含HTML注释的元素

在css中：

div:empty {
   display: none;
}

如果div不存在，则必须使用JavaScript来检查它是否存在

if(document.getElementById('id_of_element'))
{
    
}

Answer 3

.content {
  width: 500px;
  height: auto;
  position: relative;
  overflow: hidden;
  text-align: center;
  text-transform: uppercase;
  color: #000
}

.red {
  position: relative;
  background: #f00;
  width: 100%;
  height: auto;
  top: 0;
  padding: 20px 0;
}

.green {
  float: left;
  background: green;
  width: 80%;
  height: auto;
  padding: 20px 0;
}

.blue {
  float: left;
  background: blue;
  color: white;
  width: 20%;
  height: auto;
  padding: 20px 0;
}

<div class="content">
  <div class="red">Red</div>
  <div class="green">Green</div>
  <div class="blue">Blue</div>
</div>

HTML / CSS - 根据可用元素更改布局

3 个答案: