Выравнивание по правому краю логотипа над текстом с помощью Flex - PullRequest
Новая
       55

Выравнивание по правому краю логотипа над текстом с помощью Flex

0 голосов
/ 10 января 2019

Я пытаюсь выровнять 1 из 2 предметов над другим при использовании flex. У меня есть .section, который отображает: flex - .main-body, который определяет ширину контейнера, а затем .logo & .content в этом. Я не уверен, где я все испортил, но я пытаюсь выровнять .logo по .content (или смайлик в моем примере ниже). Используя display: flex в .section, я смог отцентрировать контейнер (.main-body) и сохранить для всех элементов этого контейнера заданную ширину, однако, когда я пытаюсь выровнять .logo вправо, используя justify -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, чтобы показать структуру и то, что я пытаюсь выполнить, но без необходимости полагаться на «margin-left» в .logo. Как мне это сделать, используя flex?

Ответы [ 3 ]

0 голосов
/ 10 января 2019

Было бы здорово добавить скриншот вашей цели, НО.

Попробуйте абсолютное положение на логотипе. 

.logo{
  position: absolute; / Could change to fixed if wanted.
  top: 0; // change to get right pos
  right: 0; // change to get right pos
}
0 голосов
/ 10 января 2019

У меня недавно была похожая проблема, и лучшим решением для меня было использование css grid. Это позволяет вам разделить вашу страницу на несколько частей, и каждый элемент, который вы создаете, может быть помещен в любую часть вашей страницы, которую вы хотите. Я пробовал маржинальное решение, но вы поймете, что если вы попытаетесь поместить другой элемент в центр той же линии, ваш правый элемент будет двигаться. Также, если вы добавите ссылку в логотип, она может работать не так, как вы хотите. В моем случае, когда щелчок по изображению приводил к странице, которая была показана в логотипе, я мог щелкнуть во многих областях поля (слева от изображения) и все равно перейти на страницу логотипа. Взгляните на сетки CSS здесь: https://css -tricks.com / snippets / css / complete-guide-grid /

0 голосов
/ 10 января 2019

Попробуйте это: 

<!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>
...