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

Posted 2023-03-07

【中文标题】父类中的 CSS 样式，以便一个孩子有 25% 的宽度，另一个孩子有 75% [重复]

【英文标题】：CSS styling in parent class so that one child has 25% width of parent and another child has 75% [duplicate]

【发布时间】：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%。

有什么想法吗？

【参考方案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 | MDNA 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>