Question

在尝试使用flex时，我试图将2个项目中的1个对准其他项目。我有一个.section显示：flex-.main-body，它定义了容器的宽度，然后是其中的.logo和.content。我不确定在哪里弄乱，但我正在尝试将.logo与.content对齐（或在下面的示例中为笑脸）。通过在.section中使用display：flex，我能够将一个容器（.main-body）居中，并将该容器中的所有项目都设置为特定宽度，但是，当我尝试通过对齐将.logo右对齐时-content或任何其他flex属性，徽标的位置不会更改。

我找到了使用“ margin-left：XXXpx;”的临时解决方案。在.logo上，但是将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网格。它允许您将页面分为几部分，并且您创建的每个元素都可以放在您想要的页面的任何部分中。我已经尝试过边距解决方案，但是您会意识到，如果您尝试在同一行的中心放置另一个元素，则右边的元素将会移动。另外，如果您在徽标中添加链接，则它可能无法按您希望的那样工作。就我而言，单击图像可转到徽标中显示的页面，但我可以单击空白处的许多区域（图像左侧），然后仍然转到徽标的页面。在此处查看CSS网格：https://css-tricks.com/snippets/css/complete-guide-grid/

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

3 个答案: