0

Есть блок, который содержит в себе два других блока. Эти два блока занимают по ширине - 25 и 75%, соответственно.

Если в блоке с 75% слишком длинный текст, то он почему-то растягивается на 10-20 пикселей в ширину. В чем проблема?

/*----------DEFAULT----------*/

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: #333;
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
}

a {
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.3s linear;
}

a:hover {
  color: gold;
}

.container {
  width: 100%;
  max-width: 1170px;
  min-width: 745px;
  height: 100%;
  margin: 0 auto;
}


/*----------BACKGROUND----------*/

.bg {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: linear-gradient(#d75100, #a1005b);
  background-attachment: fixed;
}


/*----------HEADER (HAT)----------*/

.hat {
  width: 100%;
  z-index: 1000;
}

.hat:after {
  content: "";
  display: block;
  width: 100%;
  max-width: 1170px;
  height: 2px;
  margin: 0 auto;
  background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
  opacity: 0;
  transition: opacity 0.2s linear;
}

.hat:hover:after {
  opacity: 1;
}

.hat_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1170px;
  min-width: 745px;
  margin: 0 auto;
}

.hat_inner p {
  position: relative;
  bottom: 15px;
  font-size: 36px;
}

.hat_inner #logoDiv {
  white-space: nowrap;
}


/*----------INFO MENU (HAT)----------*/

.nav {
  display: inline-block;
  text-transform: uppercase;
}

.nav a {
  position: relative;
  bottom: -8px;
  margin: 0 10px;
}

.nav a:after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  background-color: gold;
  opacity: 0;
  transition: opacity 0.3s linear;
}

.nav a:hover:after {
  opacity: 1;
}


/*----------MAIN CONTENT----------*/

.content {
  flex-grow: 1;
  width: 100%;
  max-width: 1170px;
  min-width: 745px;
  margin: 0 auto;
  margin-top: 30px;
  display: flex;
}

.lMenu {
  width: 25%;
  margin: 0 15px;
  background-color: gray;
}

.rMenu {
  width: 75%;
  margin: 0 15px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  background-color: gray;
}


/*----------ARTICLES----------*/

.article {
  position: relative;
  max-width: 100%;
  height: 200px;
  margin-bottom: 15px;
  border-radius: 10px;
  background-color: #FFFFFF;
}

.article_inner {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  transition: filter 0.3s linear;
  z-index: 1;
}

.article_inner:hover {
  filter: blur(3px);
}

.article_inner:hover~.article_shadowing {
  opacity: 0.8;
}

.article_inner #p {
  flex-grow: 1;
  padding: 5px 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
}

.article_head {
  min-height: 30px;
  padding: 0px 10px;
  color: white;
  background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.3s linear;
}

.article_head:hover {
  color: gold;
}

.article_shadowing {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  vertical-align: middle;
  border-radius: 0 0 5px 5px;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.3s linear;
}

.article_expandb {
  margin: auto auto;
  padding: 5px 20px;
  border: 1px solid #fff3b8;
  border-radius: 5px;
  color: white;
}


/*.article {
    position: relative;
    width: 70%;
    height: 200px;
    
    margin: 30px auto;
    
    border-radius: 5px;
    
    background-color: #FFFFFF;
}

.article_inner {
    display: flex;
    flex-direction: column;
    position: relative;
    
    width: 100%;
    height: 100%;
    
    transition: filter 0.3s linear;
    z-index: 1;
}

.article_inner:hover {
    filter: blur(3px);
}

.article_inner:hover ~ .article_shadowing {
    opacity: 0.8;
}

.article_inner #p {
    flex-grow: 1;
    
    padding: 5px 10px;
    
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
}

.article_head {
    min-height: 30px;
    
    padding: 0px 10px;
    
    color: white;
    background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.3s linear;
}

.article_head:hover {
    color: gold;
}

.article_shadowing {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    
    vertical-align: middle;
    
    border-radius: 0 0 5px 5px;
    
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    
    transition: opacity 0.3s linear;
}

.article_expandb {
    margin: auto auto;
    padding: 5px 20px;
    
    border: 1px solid #fff3b8;
    border-radius: 5px;
    
    color: white;
}*/
<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles/mainStyle.css">
  <title>Try1</title>
</head>

<body>

  <div class="bg">

    <header class="hat">
      <div class="hat_inner">
        <div id="logoDiv" style="display: inline-block;">
          <a href="index.php">
            <img src="sources/logo.png" style="margin-top: 10px;">
          </a>
          <a href="index.php">
            <p style="display: inline-block;">ИСС Антивирусы-фаги</p>
          </a>
        </div>

        <nav class="nav">
          <a href="#">О Проекте</a>
          <a href="#">Контакты</a>
          <a href="#">Войти</a>
        </nav>
      </div>
    </header>

    <div class="content">
      <div class="lMenu">

      </div>
      <div class="rMenu">

        <div class="article">
          <div class="article_inner">
            <h3 class="article_head">
              "=$row[0]"
            </h3>
            <div id="p">
              "=$row[1]"
            </div>
          </div>
          <div class="article_shadowing">
            <p class="article_expandb">Читать...</p>
          </div>
        </div>
        <!--<?php 
                include "scripts/select_content.php";
            ?>-->
      </div>
    </div>

  </div>

</body>

Видео прикрепляю:

https://youtu.be/Vi9TOo6Z-kE

1 ответ 1

0

Использование margin: 0 15px; в классе rMenu и lMenu оставляет вам отступы по 15px слева и справа. Как я понимаю именно в этом и проблема.

В качестве временной альтернативы могу предложить заменить width: 75%; на width: calc(75% - 60px);, что решает проблему, если я не ошибаюсь.

Было бы интересно самому узнать, как вычисление ширины блоков в данном случае работает. Возможно кто-то объяснит.

То есть теперь класс должен выглядеть так:

.rMenu {
    margin: 0 15px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    width: calc(75% - 60px);
    background-color: gray;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.