Question

如果用户已注册到我的网站，则在他们的登录区域中我有3个div，如下所示：

<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>

这些div的宽度均为32％，并且彼此内嵌。

#psts-cancel-link {
  background: white;
  border-left: 3px solid #ccc;
  padding: 1em;
  width: 32%;
  min-height: 270px;
  float: left;
}
.psts-receipt-link {
  background: white;
  border-left: 3px solid #ccc;
  min-height: 270px;
  float: left;
  width: 32%;
  margin: 0 10px;
  padding: 20px;
}
#psts-signup-another {
  background: white;
  padding: 1em;
  border-left: 3px solid #ccc;
  margin-bottom: 30px;
  width: 32%;
  min-height: 270px;
  float: left;
}

当用户未注册时，只显示其中一个div：

<div id="psts-signup-another"></div>

当没有显示div1和div2时，是否可以更改此样式以使其宽度为100％？

到目前为止，我已尝试过这一点，但没有成功：

#psts-cancel-link ~ .psts-receipt-link ~ #psts_existing_info #psts-signup-another {
  width:100%;
}

Answer 1

表格布局实施

使用table布局。在父元素上指定display: table，在子元素上指定display: table-cell。

#psts-cancel-link {
  background: tomato;
  border-left: 3px solid #ccc;
  padding: 1em;
  min-height: 270px;
  display: table-cell;
  word-wrap: break-word;
}
.psts-receipt-link {
  background: lightblue;
  border-left: 3px solid #ccc;
  min-height: 270px;
  margin: 0 10px;
  padding: 20px;
  display: table-cell;
  word-wrap: break-word;
}
#psts-signup-another {
  background: tomato;
  padding: 1em;
  border-left: 3px solid #ccc;
  margin-bottom: 30px;
  min-height: 270px;
  display: table-cell;
  word-wrap: break-word;
}
.container {
  display: table;
  width: 100%;
  table-layout: fixed;
}

Logged in
<div class="container">
  <div id="psts-cancel-link"></div>
  <div class="psts-receipt-link"></div>
  <div id="psts-signup-another"></div>
</div>
Logged out
<div class="container">

  <div id="psts-signup-another"></div>
</div>

Flexbox布局实施

您还可以使用flexbox根据父容器扩展和缩小子项目。

#psts-cancel-link {
  background: tomato;
  border-left: 3px solid #ccc;
  padding: 1em;
  min-height: 270px;
  flex: 1;
}
.psts-receipt-link {
  background: lightblue;
  border-left: 3px solid #ccc;
  min-height: 270px;
  margin: 0 10px;
  padding: 20px;
  flex: 1;
}
#psts-signup-another {
  background: tomato;
  padding: 1em;
  border-left: 3px solid #ccc;
  margin-bottom: 30px;
  min-height: 270px;
  flex: 1;
}
.container {
  display: flex;
}

Logged in
<div class="container">
  <div id="psts-cancel-link"></div>
  <div class="psts-receipt-link"></div>
  <div id="psts-signup-another"></div>
</div>
Logged out
<div class="container">

  <div id="psts-signup-another"></div>
</div>

Answer 2

如果它确实是第二种情况下唯一的孩子，你可以简单地使用:first-child。

#psts-signup-another:first-child {}

Answer 3

您可以使用adjacent选择器。请看下面的代码段：

#psts-signup-another {padding: 5px; background: #f99;}
div + div + #psts-signup-another {padding: 5px; background: #99f;}

<h2>Div when three divs are present</h2>
<div class="theDivs">
  <div id="psts-cancel-link" class="psts-cancel-link"></div>
  <div class="psts-receipt-link"></div>
  <div id="psts-signup-another"></div>
</div>
<h2>Div when three divs are not present</h2>
<div class="theDivs">
  <div id="psts-signup-another"></div>
</div>

Answer 4

我认为你应该在用户注销时使用另一个带有新类的容器div。

登录：

<div class="container">
    <div id="psts-cancel-link" class="psts-cancel-link"></div>
    <div class="psts-receipt-link"></div>
    <div id="psts-signup-another"></div>
</div>

退出：

<div class="container logout">
    <div id="psts-cancel-link" class="psts-cancel-link"></div>
    <div class="psts-receipt-link"></div>
    <div id="psts-signup-another"></div>
</div>

CSS：

.container.logout > div {
    display:none;
}
.container.logout > .psts-signup-another {
    display:block;
}

如果div1和div2不存在，CSS样式div3会有所不同

4 个答案: