Flexbox中的Flexbox &堆叠元件

Question

我在试着做一张卡片

• 在右列中分成两列，高度相同(80%/20%)的
• ，

中的两行(或更多行)

所以，就像：

​

​

正在发生的事情是，我在两个正确的方框周围有很多空格。我曾尝试将<p>标记的边距调整为0，但随后整个列的高度与左边较大的列不相等。有人知道怎么做到这一点吗？

​

.cardWrap {
    box-sizing: border-box;
    max-width: 1024px;
    border: 2px solid #e5bc73;
}

.cardContent {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

.left {
    flex: 0 1 80%;
    flex-direction: column;
    padding: 15px;
}

.right {
    flex: 0 1 20%;
    flex-direction: row;
}

.gold {
    background-color: #e5bc73;
}

.black {
    background-color: #000;
    color: #fff;
}

<div class="cardWrap">
    <div class="cardContent">
        <div class="left">
            <h4>Header</h4>
            <p>Some text</p>
        </div>
        <div class="right">
            <div class="gold">
                <p>Baaaah</p>
                <p>Baaaah</p>
                <p>Baaaah</p>
                <p>Baaaah</p>
                <p>Baaaah</p>
            </div>
            <div class="black">
                <p>Moo</p>
            </div>
        </div>
    </div>
</div>

​

Answer 1

在所有的margin: 0标记上应用<p>应该足够得到想要的结果；

p {
  margin: 0;
}
.cardWrap {
    box-sizing: border-box;
    max-width: 1024px;
    border: 2px solid #e5bc73;
}

.cardContent {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

.left {
    flex: 0 1 80%;
    flex-direction: column;
    padding: 15px;
}

.right {
    flex: 0 1 20%;
    flex-direction: row;
}

.gold {
    background-color: #e5bc73;
}

.black {
    background-color: #000;
    color: #fff;
}

<div class="cardWrap">
    <div class="cardContent">
        <div class="left">
            <h4>Header</h4>
            <p>Some text</p>
        </div>
        <div class="right">
            <div class="gold">
                <p>Baaaah</p>
                <p>Baaaah</p>
                <p>Baaaah</p>
                <p>Baaaah</p>
                <p>Baaaah</p>
            </div>
            <div class="black">
                <p>Moo</p>
            </div>
        </div>
    </div>
</div>

​

Answer 2

重新编辑v2.

<div class="cardWrap">
      <div class="left">
        <h4>Header</h4>
        <p>Some text</p>
      </div>
      <div class="right">
        <div class="gold">
          <p>Baaaah</p>
          <p>Baaaah</p>
          <p>Baaaah</p>
          <p>Baaaah</p>
          <p>Baaaah</p>
        </div>
        <div class="black">
          <p>Moo</p>
        </div>
      </div>
    </div>

* {
  padding: 0;
  margin: 0;
}
.cardWrap {
  display: flex;
  box-sizing: border-box;
  max-width: 1024px;
  border: 2px solid #e5bc73;
  height: 500px;
}

.left {
  flex: 80%;
  flex-direction: column;
  padding: 15px;
}

.right {
  flex: 20%;
  flex-direction: row;
}

.gold {
  background-color: #e5bc73;
  height: 70%;
}

.black {
  background-color: #000;
  color: #fff;
  height: 30%;
}

你有一个容器什么也不做，所以我把它移走了，让你更容易理解，希望这有帮助。