Почему макет не отображается так, как на картинке? - PullRequest
Новая
       21

Почему макет не отображается так, как на картинке?

0 голосов
/ 03 апреля 2020

Я хочу иметь структуру макета, как на изображении, где текст «Верхний колонтитул» выровнен по центру, а ссылка выровнена по правому краю, а в левом столбце у меня есть текст и ниже каждого текста, выровненное изображение в центре:

enter image description here

Но это не работает должным образом, я пытаюсь получить этот макет как этот "https://jsfiddle.net/e2gvbjyq "но есть 3 проблемы:

  • ссылка" Ссылка "неправильно выровнена по вертикали с текстом" Заголовок "и неправильно выровнена справа
  • изображения в левый столбец не выровнен по центру, как на рисунке выше
  • padding:1em в правом столбце не влияет на столбец
  • нижний колонтитул не отображается внизу как на картинке выше

Знаете почему? Я новичок, поэтому я пытаюсь использовать основы, такие как margin, float, чтобы достичь этого макета.

HTML

    <!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>

  <body>

    <header>
      <h1>Title</h1>
      <a href="#">Link</a>
    </header>

    <section id="content-left">
      <article>
        <h2>Left Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae officiis neque atque amet fugit, eveniet at maxime nesciunt. Sint repellat neque necessitatibus ea sequi tempora, dolor non, possimus magni odio</p>
        <img src="http://via.placeholder.com/300">


        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae officiis neque atque amet fugit, eveniet at maxime nesciunt. Sint repellat neque necessitatibus ea sequi tempora, dolor non, possimus magni odio.</p>
        <img src="http://via.placeholder.com/300">


        <p class="issue"><b>(Issue: Images are not aligned at center)</b></p>

      </article>
    </section>
    <section id="content-right">
      <article>
        <h2>Right Title</h2>
        <p class="issue">(Issue: padding left is not working)</p>
      </article>
    </section>
    <footer>
      <h1>Footer</h1>
      <p><b class="issue">(Issue: footer is not at bottom of the page)</b></p>
    </footer>

  </body>
</html>

CSS

*{
    border:0px;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body{
    font-family: Arial;
    padding: 5px;
    color: #000;
}

h1{
    text-align: center;
    font-size: 120%;
}

h2{
    font-size: 80%;
}

h3{
    font-size: 75%;
}

header{
    background-color: #cc9;
    padding: 1em;
    background-color: orange;
    text-align: center;
}

header h1{
    display: inline;
}

header a{
    display: inline;
    padding: 0.5em;
    float: right;
    border: 2px solid #000;
    text-decoration: none;
    line-height: 30px;
    font-size: 10pt;
    text-align: center;
}

header a:hover{
    background-color: #EEE;
    color: #000;
    font-weight: bold;
}

footer{
    min-height: 100px;
    background-color: #cc9;
    padding: 1em;
    background-color: orange;
    text-align: center;
}


article{
    padding:1em;
    text-align: left;
}

article p{
    margin: 1rem 0 1rem 0;
    font-size: 70%;
}

article img{
    text-align: center;
    max-width: 100px;
}

#content-left{
    width: 50%;
    float: left;
    background-color: green;
    padding: 1em;
}

#content-right{
    background-color: red;
    padding: 1em;
}

.issue{color:yellow;}

1 Ответ

2 голосов
/ 03 апреля 2020

Вы можете добавить дополнительный div и сделать его гибким.

Ширина заголовка: 100% содержимого справа: ширина: 50% содержимого слева: ширина: 50% Ширина нижнего колонтитула: 100% 
  <body>
<div class="conteiner">
    <header>
    <section id="content-right">
    <section id="content-left">
    <footer>
    </div>

  </body>
</html>


.conteiner{
  display:flex;
  flex-wrap: wrap;
}

Ссылка на ваш код: https://codepen.io/Vova_Champion_1/pen/JjdqbLr

...