父类中的 CSS 样式，以便一个孩子有 25% 的宽度，另一个孩子有 75% [重复]答案

【问题标题】：CSS styling in parent class so that one child has 25% width of parent and another child has 75% [duplicate]父类中的 CSS 样式，以便一个孩子有 25% 的宽度，另一个孩子有 75% [重复]
【发布时间】：2022-01-14 08:18:44
【问题描述】：

假设父节点的宽度为 100%，则希望子节点 1 的宽度为 25%，子节点 2 的宽度为 75%。

这两个子组件是一些自定义组件，不能拥有自己的类，因此必须在父类中进行更改。

我尝试过的：

.parent {
  display: flex;
}

.parent:first-child {
  width: 25%;
  background: #ddd;
}

<div class="parent">
  <div>child 1</div>
  <div>child 2</div>
</div>

这使得他们俩总共拥有父级的 25%。

有什么想法吗？

【问题讨论】：

标签： html css flexbox tailwind-css

【解决方案1】：

看起来很简单：

.parent {
  display: flex;
  gap: 15px;
  margin: 15px;
}

.parent > div:first-child {
  flex-basis: 25%;
  outline: 1px dotted red;
  background: #ddd;
}
.parent > div:nth-child(2) {
  flex-basis: 75%;
  outline: 1px dotted green;
}

<div class="parent">
  <div>child 1</div>
  <div>child 2</div>
</div>

通过在两个子元素上设置the flex-basis property，可以让它们占据容器的整个宽度。

另一种选择是设置第一个孩子的flex-basis，并告诉第二个孩子成长以填充剩余空间。

.parent {
  display: flex;
  gap: 15px;
  margin: 15px;
}

.parent > div:first-child {
  flex-basis: 25%;
  outline: 1px dotted red;
  background: #ddd;
}
.parent > div:nth-child(2) {
  flex-grow: 1;
  outline: 1px dotted green;
}

<div class="parent">
  <div>child 1</div>
  <div>child 2</div>
</div>

CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN
A Complete Guide to Flexbox - CSS-Tricks

【讨论】：

一些解释会使这成为一个更好的答案。

【解决方案2】：

您需要更新选择器以正确定位子元素，例如：

.parent {
  width: 500px;
  height: 200px;
  display: flex;
  border: 1px solid black;
}

.parent div:first-child {
  background-color: red;
  width: 25%;
  height: 200px;
}

.parent div:nth-child(2) {
  background-color: yellow;
  width: 75%;
  height: 200px;
}

<div class="parent"> 
  <div> child1 </div>
  <div> child2 </div>
 </div>

【讨论】：

【解决方案3】：

尝试使用css网格

.parent {
  display: grid;
  grid-template-columns: 25% 75%;
}

.parent > div {
  border: 1px solid blue;
}

<div class="parent">
  <div>child 1</div>
  <div>child 2</div>
</div>

【讨论】：

没有必要完全改变策略。

【解决方案4】：

您的伪选择器有问题。它正在寻找一个类为parent 的元素，它是第一个子元素。你想要.parent :first-child，它是一个后代选择器。

.parent {
  display: flex;
  justify-content: stretch;
}

.parent :first-child {
  width: 25%;
  background: #ddd;
}

.parent :last-child {
  flex: auto;
  background: pink;
}

<div class="parent">
  <div>child 1</div>
  <div>child 2</div>
</div>

【讨论】：