Question

我试图将标题对齐在顶部居中，图像和段落并排在标题下方。因此，第一项位于顶部，第2项位于左下方，第3项位于右下方。

这是我到目前为止的代码..

HTML：

.owner-pic {
    display: flex;
    flex-flow: column wrap;
}

section .owner-pic h2 {
    align-self: center;
    margin-bottom: 5px;
}

section .owner-pic img {
    border-radius: 100%;
    max-height: 200px;
    max-width: 200px;
    align-self: flex-start;

}

section .owner-pic p {;
    align-self: flex-end;
    flex-grow: 2;
}

CSS：

Private Sub IS_SETUP Click()

    If Me.IS_SETUP = vbTrue Then      
    Me.SUPPLIER_NUMBER.Visible = True
Else
    Me.SUPPLIER_NUMBER.Visible = False
    End If

End Sub

Answer 1

如果它只是owner-pic＆＃34;标题＆＃34;那样的话：

＆＃13;

* {
  margin: 0;
}
header {
  display: flex;
  flex-wrap: wrap;
  width: 250px;
  margin: 2em auto;
  border: 1px solid grey;
  text-align: center;
  margin: 2em auto;
}
header h2 {
  flex: 0 0 100%;
  background: lightblue;
}
.child {
  flex:1;
  height: 100px;
  background: plum;
  border:1px solid green;
}

＆＃13;

<header>
  <h2>Header</h2>
  <div class="child">1</div>
  <div class="child">2</div>
</header>

＆＃13;

Answer 2

不太清楚：

.owner-pic {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}
.owner-pic h2 {
  width: 100%;
  text-align: center;
  margin: 5px;
}
.owner-pic img {
  border-radius: 100%;
  max-height: 200px;
  max-width: 200px;
}
.owner-pic p {}

<div class="owner-pic">
  <h2>Meet The Director</h2>
  <img src="http://lorempixel.com/500/300" alt="#">
  <p>Some text and shhhh more text and shipsum</p>
</div>

或

.owner-pic {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}
.owner-pic h2 {
  width: 100%;
  text-align: center;
  margin: 5px;
}
.owner-pic img {
  border-radius: 100%;
  max-height: 200px;
  max-width: 200px;
}
.owner-pic p {}

<div class="owner-pic">
  <h2>Meet The Director</h2>
  <img src="http://lorempixel.com/500/300" alt="#">
  <p>Some text and shit more text and shit</p>
</div>

你在找？

Answer 3

请记住，我在更新的帖子之前写了这个。我认为你并不需要所有的Flexbox。通过将内容（.img和.text）放在flex容器（.flex）中然后将标题（.title）放在居中并位于顶部，可以保持简单。 html和body的样式是可选的，它们是我通常使用的默认值。

＆＃13;

html {
  box-sizing: border-box;
  font: 500 16px/1.428'Verdana';
  height: 100vh;
  width: 100vw;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
body {
  position: relative;
  font-size: 1rem;
  line-height: 1;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.flex {
  display: flex;
  flex-flow: row wrap;
  width: 100vw;
  padding: 0 10px;
}
.title {
  text-align: center;
  margin-bottom: 5px;
  width: 100vw;
}
img {
  border-radius: 100%;
  max-height: 200px;
  max-width: 200px;
}
.img {
  margin: 5px 10px;
}
.text {
  flex: 2 0;
  padding: 0 10px;
}

＆＃13;

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>35733984</title>

</head>

<body>
  <header class="title">
    <h2>HEADER</h2>
  </header>
  <section class="flex">
    <figure class="img">
      <img src="http://lorempixel.com/200/200/nightlife">
    </figure>
    <article class="text">
      <p>Lorem ipsum dolor sit amet, vel cu purto ancillae, in erat gubergren vim. Has in scripta vituperata, audiam option democritum eos et. His in agam mediocrem assentior, nusquam vituperata vituperatoribus ex vim. Vel ei equidem omittam. Vis ex quodsi
        voluptatum, cum semper commodo ceteros no, nec possim pertinax an.
      </p>
    </article>
  </section>
</body>

</html>

＆＃13;

Answer 4

感谢每个人给我解决方案！我还在学习，我真的被困在这里..

这是解决我问题的方法。

.owner-pic {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}

section .owner-pic h2 {
    width: 100%;
    text-align: center;
    margin: 5px;
}

section .owner-pic img {
    border-radius: 100%;
    max-height: 200px;
    max-width: 200px;
}

Flexbox - 将项目1对齐在顶部，将项目2和3对齐在底部并排

4 个答案: