Question

刚开始使用Flexbox。通过尝试创建一个非常简单的CV网站来实践。

Codepen在这里： http://codepen.io/koentj/pen/jyLxGX

我正在尝试social-container左侧的picture-container。这两个都在profile-container范围内，而name-container提供profile-container大部分空间（aka name-container将使用它所需要的内容，而social-container将使用剩下的空间。

无论我做了什么（我已经尝试了一堆），picture-container最终都高于Public Sub Rollback() Try transaction.Rollback() connection.Close() Catch EndTry End Sub，我觉得我错过了一些非常简陋的东西。

Answer 1

我不完全确定您的HTML是否反映了您要执行的操作。目前它是这样的：

- header
-- .name-container  
-- .profile-container
--- .social-container
---- .picture-container

如果.picture-container成为.social-container的兄弟而不是子元素会更容易。

这样你就可以display: flex使用.profile-container并将两个元素并排。

body {
  display: flex;
  flex-direction: column;
  font-family: "Helvetica Neue, Helvetica, Liberation Sans, Arial, sans-serif";
}

header {
  background: #42A8C0;
  width: 100%;
  color: white;
  text-align: center;
}

img {
  max-width: 100%;
}

.profile-container {
  display: flex;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<header>
  <div class="name-container">
    <h1>My Name</h1>
    <h4>Small summary of current position</h4>
  </div>
  
  <div class="profile-container">
    <div class="social-container">
      <a href="http://www.google.com" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
      <a href="http://www.google.com" target="_blank"><i class="fa fa-github-square" aria-hidden="true"></i></a>
    </div>

    <div class="picture-container">
      <img src="https://cdn.pixabay.com/photo/2016/02/22/18/57/puppy-1216269_960_720.jpg" class="portrait-pic">
    </div>
  </div>
</header>

Flexbox标题：将框右对齐，行中包含两个元素

1 个答案: