Боковая панель не плавает вправо - PullRequest
Новая
       0

Боковая панель не плавает вправо

1 голос
/ 11 февраля 2020

Я пытаюсь решить проблему с плавающей боковой панелью.

Я создал сайт в стиле блога, у которого есть боковая панель справа от текста. Первая страница работала хорошо, и при изменении сообщения на странице 2 боковая панель больше не перемещается вправо. Может кто-нибудь сказать, почему это происходит? Спасибо. 

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

.container {
  width: 1148px;
  margin: 20px auto;
}

.blog-post {
  width: 80%;
  /*background-color: rgba(100,134,134,.2);*/
  float: left;
  padding-right: 30px;
  position: relative;
}

.other-posts {
  display: inline-block;
  width: 20%;
  /*background-color: rgba(100,10,134,.2);*/
  float: left;
}

.clearfix:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

h1,
h2 {
  margin: 20px 0;
}

p {
  text-align: justify;
  margin-bottom: 15px;
  line-height: 130%;
}

.author-box {
  border-top: 1px solid #808080;
  padding-top: 20px;
  padding-bottom: 20px;
}

.other {
  margin-bottom: 30px;
}

.author-text {
  font-size: 22px;
  float: left;
  margin: 30px 10px;
}

.author-box img {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  float: left;
  margin-bottom: 20px;
}

.date {
  position: absolute;
  top: 30px;
  right: 30px;
}

.other a {
  text-decoration-line: none;
}
<!DOCTYPE html>
<html>

<head>
  <title>Test with CSS/a blog</title>
  <link rel="stylesheet" type="text/css" href="styles2.css">
</head>

<body>
  <div class="container">
    <div class="blog-post">
      <h1>This is my second blog build</h1>
      <p class="date">April 9th, 2019</p>
      <h2>Yeah, we talk about delphins again.</h2>
      <p class="main-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse<br> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing
        elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


      <div class="other-posts">
        <div class="other">
          <a href="#">The first post. What is the future of the TV.</a>
        </div>
        <div class="other">
          <a href="#">The second post. Yeah, we talk about delphins again.</a>
        </div>
        <div class="other">
          <a href="#">The third post. What should you know about CSS grid.</a>
        </div>
      </div>
      <div class="clearfix"></div>

      <div class="author-box">
        <img src="https://randomuser.me/api/portraits/women/66.jpg">
        <p class="author-text">mrs Janet Gonzales</p>
      </div>
    </div>
    <!-- container ending div -->
</body>

</html>

1 Ответ

2 голосов
/ 11 февраля 2020

Похоже, вам не хватает закрывающего тега </div> для <div class="blog-post">. Вставьте закрывающий тег, и я думаю, вы получите то, что вам нужно. 

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

.container {
    width: 1148px;
    margin: 20px auto;

}

.blog-post {
    width: 80%;
    /*background-color: rgba(100,134,134,.2);*/
    float:left;
    padding-right: 30px;
    position: relative;
}

.other-posts {
    display: inline-block;
    width: 20%;
    /*background-color: rgba(100,10,134,.2);*/
    float: left;
}

.clearfix:after {
    content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

h1,h2 {
    margin: 20px 0;
}

p {
    text-align: justify;
    margin-bottom: 15px;
    line-height: 130%;
}

.author-box {
    border-top: 1px solid #808080;
    padding-top: 20px;
    padding-bottom: 20px;
}

.other {
    margin-bottom: 30px;
}

.author-text {
    font-size: 22px;
    float: left;
    margin: 30px 10px;
}

.author-box img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    float: left;
    margin-bottom: 20px;
}

.date {
    position: absolute;
    top: 30px;
    right: 30px;
}

.other a {
    text-decoration-line: none;
}
<div class="container">
  <div class="blog-post">
    <h1>This is my second blog build</h1>
    <p class="date">April 9th, 2019</p>
    <h2>Yeah, we talk about delphins again.</h2>
    <p class="main-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse<br>
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

  <div class="other-posts">
    <div class="other">
      <a href="#">The first post. What is the future of the TV.</a>
    </div>
    <div class="other">
      <a href="#">The second post. Yeah, we talk about delphins again.</a>
    </div>
    <div class="other">
      <a href="#">The third post. What should you know about CSS grid.</a>
    </div>
  </div>
  <div class="clearfix"></div>

  <div class="author-box">
    <img src="https://randomuser.me/api/portraits/women/66.jpg">
    <p class="author-text">mrs Janet Gonzales</p>
  </div>
</div> <!-- container ending div -->
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...