CSS网格方式

Question

我有两个容器：left和right。 left在顶部包含文本，在底部包含按钮； right包含其他居中的组件。 right的高度始终高于left的高度，但是我既不是right也不是left的高度。我想将left的文本开头与right的开头对齐，并将left的按钮与right的结尾对齐。为了做到这一点，我试图使它们的高度相同，但是我没有做到这一点。

这是我想要的视觉效果：

这是示例代码：

<div id="parent" className="flex items-center justify-center vh-100 w-100">
    <div id="left" className="flex flex-column justify-between">
        <Text />
        <Buttons />
    </div>
    <div id="right" className="flex items-center justify-center">
        <TallStuff />
    </div>
</div>

我正在使用Tachyon's classes进行说明。

我已经尝试使用flex: 1上的flex-grow，align-items: stretch，height: 100%，left和其他<div className="flex h-100 items-center w-100"> <section className="pt3 w-40"> <Card authors={authors} cover={cover} date={date} plataforms={plataforms} synopsis={synopsis} title={title} /> </section> <section className="flex flex-column items-center justify-center w-60"> <BookCarousel books={data} title="main feeling" /> <BookCarousel books={data} title="main feeling" /> </section> </div>无效。

我正在改写我的情况，以使情况更清楚。希望对您有所帮助。

我有一个屏幕，用户可以在其中单击书并查看有关该书的信息：

这些书是通过第三方API获取的，所以我不知道这些书有多大。而且由于此屏幕仍在开发中，所以我不知道右边的列是否总是像现在这样。出现问题时（例如，文本太小），我得到了这样的内容：

在我想要更多类似内容的地方：

这是您看到的屏幕代码：

<Card>

这是<article class="flex flex-column items-center justify-between pl3 pr3"> <section> <Cover alt={title} src={cover} className="fl mr3" /> <h2 className="di f5 ma0">{title}</h2><br/> {signature}<br/><br/> {summary} </section> <section className="flex"> // buttons </section> </article>组件的JSX：

option

它是用React写的。（CSS仍然是Tachyons）

Answer 1

.row {
  display: flex;
}

.col {
  flex: 1;
}

<div class="row">
  <div class="col">In 2012, I found myself looking for a job. The startup I was working in was winding down and I spent my time idly looking for interesting things to do. </div>
  <div class="col">When AppsFlyer started, it was just 2 guys — Oren, the CEO, doing all the business and Reshef, the CTO, writing all the code. Reshef decided to write AppsFlyer, at the beginning, in Python. Why Python? Well, if you’re a startup that needs to grow and change code very rapidly, Python will probably serve you best. It’s a super simple language with a vast ecosystem that is both interpreted and dynamically typed, which means it’s really malleable and easy to twist and change. When I joined Reshef in writing the code, that’s what we did — we hacked away in Python to our heart’s content. We designed a microservice-oriented architecture that revolved around different Python services, which communicated mainly via pub/sub and http calls (which later evolved into a mostly async communication flow based on Kafka). This served us well for the first year and a half of AppsFlyer’s growth.</div>
</div>

Answer 2

CSS网格方式

我建议从CSS Tricks文章开始，该文章介绍如何设置基本网格并将元素放置在其中。

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 100%;
}

.grid-x-lefttop,
.grid-x-leftbottom {
  grid-column-start: 1;
  grid-column-end: 2;
}

.grid-x-lefttop {
  background-color: green;
  grid-row-start: 1;
  grid-row-end: 2;
}

.grid-x-leftbottom {
  background-color: blue;
  align-self: end;
  grid-row-start: 2;
  grid-row-end: 3;
}

.grid-x-right {
  background-color: aqua;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}

<div class="grid">
  <div class="grid-x-lefttop">
    <p>Left column text</p>
  </div>
  <div class="grid-x-leftbottom">
    <button>Left column button</button>
  </div>
  <div class="grid-x-right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id nisl vitae dolor porta ornare. Ut tincidunt rutrum ante sit amet tincidunt. Etiam gravida neque ut nisi tincidunt viverra. Ut maximus tincidunt ultricies. Cras tristique orci vel blandit hendrerit. Aliquam luctus nisl euismod porttitor dignissim. Praesent quis turpis convallis, venenatis magna sed, suscipit mi. Sed ac nisl sed felis fermentum imperdiet. Pellentesque vel ullamcorper arcu, quis aliquam ante. Proin molestie magna ac convallis hendrerit.</p>
    <p>Curabitur rutrum sollicitudin libero id ullamcorper. Nunc auctor dapibus mauris, sed viverra dui eleifend quis. Donec ut odio in sapien dictum pellentesque. Ut mauris enim, tristique a ultrices eu, tempor nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in justo cursus, facilisis sem sodales, iaculis diam. Cras venenatis arcu nisi. Nunc vel scelerisque orci. Vestibulum sit amet metus id augue maximus congue. Cras pretium fringilla dapibus. Nullam sollicitudin risus sit amet elit lobortis, vitae placerat dui rutrum.</p>
  </div>
</div>

Flexbox方式

您还可以使用嵌套的flexbox项来实现此目的。

.flexcontainer {
  align-items: stretch;
  display: flex;
}

.flexcontainer-x-left,
.flexcontainer-x-right {
  flex: 1 1 100%;
}

.flexcontainer-x-left {
  background-color: green;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flexcontainer-x-buttons {
  background-color: blue;
}

.flexcontainer-x-right {
  background-color: aqua;
}

<div class="flexcontainer">
  <div class="flexcontainer-x-left">
    <div class="flexcontainer-x-text">
      <p>Left column text</p>
    </div>
    <div class="flexcontainer-x-buttons">
      <button>Left column button</button>
    </div>
  </div>
  <div class="flexcontainer-x-right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id nisl vitae dolor porta ornare. Ut tincidunt rutrum ante sit amet tincidunt. Etiam gravida neque ut nisi tincidunt viverra. Ut maximus tincidunt ultricies. Cras tristique orci vel blandit hendrerit. Aliquam luctus nisl euismod porttitor dignissim. Praesent quis turpis convallis, venenatis magna sed, suscipit mi. Sed ac nisl sed felis fermentum imperdiet. Pellentesque vel ullamcorper arcu, quis aliquam ante. Proin molestie magna ac convallis hendrerit.</p>
    <p>Curabitur rutrum sollicitudin libero id ullamcorper. Nunc auctor dapibus mauris, sed viverra dui eleifend quis. Donec ut odio in sapien dictum pellentesque. Ut mauris enim, tristique a ultrices eu, tempor nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in justo cursus, facilisis sem sodales, iaculis diam. Cras venenatis arcu nisi. Nunc vel scelerisque orci. Vestibulum sit amet metus id augue maximus congue. Cras pretium fringilla dapibus. Nullam sollicitudin risus sit amet elit lobortis, vitae placerat dui rutrum.</p>
  </div>
</div>

Answer 3

这是一个使用纯HTML和CSS的简单示例。

  #parent {
    display: flex;
  }
  #left {
    display: flex;
    flex-direction: column;

    background: red;
  }
  #text {
    flex-grow: 1;
  }
  #right {
    flex-grow: 1;
    display: flex;
    align-items: center;

    /* arbitrary height for demo */
    height: 500px;
    background: blue;
  }

<div id="parent">
    <div id="left">
        <div id="text">
          <p>Text</p>
        </div>
        <div id="buttons">
          <button>Button</button>
          <button>Button</button>
          <button>Button</button>
          <button>Button</button>
        </div>
    </div>
    <div id="right">
      <div id="tallstuff">
        <p>TallStuff</p>
        <p>TallStuff</p>
        <p>TallStuff</p>
        <p>TallStuff</p>
        <p>TallStuff</p>
        <p>TallStuff</p>
        <p>TallStuff</p>
        <p>TallStuff</p>
    </div>
</div>

使用CSS动态使两个元素的高度相同

3 个答案:

CSS网格方式

Flexbox方式