使用 Flex 在文本上方右对齐徽标

Question

我试图在使用 flex 时将 2 个项目中的 1 个对齐到另一个之上。我有一个 .section displays:flex - .main-body 定义了容器的宽度，然后是其中的 .logo & .content。我不确定我在哪里搞砸了，但我正在尝试将 .logo 右对齐到 .content（或下面示例中的笑脸）。通过在 .section 中使用 display:flex，我能够将容器（.main-body）居中并将该容器内的所有项目设置为特定宽度 - 但是，当我尝试将 .logo 对齐到右侧时使用 justify-content 或任何其他 flex 属性，徽标的位置没有变化。

我找到了在 .logo 上使用 "margin-left: XXXpx;" 的临时解决方案，但它会将 div 容器 .logo 推到上方，以便我获得水平滚动。

编辑： 对不起，我想我不是很清楚（来晚了！）。 全屏显示 下方的代码片段显示了目标以及我想要做什么，而无需使用 .logo {margin-left: 500px;} 来实现结果。没有 margin-left 属性，面部在文本上方左对齐。基本上我想知道如何设置它以便它在使用 flex 的文本上方右对齐。

<!DOCTYPE html>
<head>    
<style>
* {
  margin: 0;
  padding: 0;
}

.container { 
    background: white fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    width: 100%;
    height: 100vh;
}

.section {
    height: 100vh;
    width:100%;
    display: flex;           
    justify-content: center; 
    align-items: center;   
}

.main-body {
    width: 736px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.logo {
    background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTx0S56P8lrzrjb-7aJX3QG_feOPux89cnLLXF_UJ49tHAys99ccw') no-repeat;
    height: 205px;
    width: 240px;
    display: flex;
    justify-content: right;
    align-self: flex-end;
}

.content {
  font-size: 45px;
  margin-bottom: 20px;
}

.lorem {
  font-size: 18px;
}  
</style>
</head>

<body>
    <div class="container">
            <div class="section">
                <div class="main-body">
                    <div class="logo"></div>
                    <div class="content">
                        <h1>Right Align Smiley</h1>
                    </div>
                    <div class="lorem">
                        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."</p>                    
                    </div>
            </div>           
    </div>       
</body>
</html>

我在 codepen 中编写了这个示例来展示结构和我想要完成的事情，但不必依赖 .logo 中的 "margin-left"，我如何通过使用 flex 来完成这个？

Answer 1

试试这个：

<!DOCTYPE html>
<head>    
<style>
* {
  margin: 0;
  padding: 0;
}

.container { 
    background: white fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    width: 100%;
    height: 100vh;
}

.section {
    height: 100vh;
    width:100%;
    display: flex;           
    justify-content: center; 
    align-items: center;   
}

.main-body {
    width: 736px;
}

.logo {
    background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWvNoFhT3HnWkUhpowyn5Zdu1mwGXA1JpNHqyQenW7upqnfIic') no-repeat;
    height: 229px;
    width:229px;
    float: right;
}

.content {
  font-size: 45px;
  margin-bottom: 20px;
  clear: right;
}

.lorem {
  font-size: 18px;
}  
</style>
</head>

<body>
    <div class="container">
            <div class="section">
                <div class="main-body">
                    <div class="logo"></div>
                    <div class="content">
                        <h1>Right Align Smiley</h1>
                    </div>
                    <div class="lorem">
                        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."</p>                    
                    </div>
            </div>           
    </div>       
</body>
</html>

Answer 2

添加目标布局的屏幕截图会很棒但是。

在徽标上尝试绝对位置。

.logo{
  position: absolute; / Could change to fixed if wanted.
  top: 0; // change to get right pos
  right: 0; // change to get right pos
}

Answer 3

我最近遇到了类似的问题，对我来说最好的解决方案是使用 css 网格。它允许您将页面分成几部分，您创建的每个元素都可以放置在您想要的页面的任何部分。我已经尝试过 margin 解决方案，但你会意识到，如果你试图将另一个元素放在同一行的中心，你的右边元素将会移动。此外，如果您在徽标中添加 link，它可能无法正常工作。在我的例子中，虽然单击图像会导致徽标中显示的页面，但我可以单击边缘的许多区域（图像左侧）并仍然转到徽标页面。在此处查看 css 个网格：https://css-tricks.com/snippets/css/complete-guide-grid/

使用 Flex 在文本上方右对齐徽标

Right Align Logo Above Text Using Flex

html

css

margin

alignment

flexbox