Как добавить верхний и нижний колонтитулы внутри div?

Question

Как добавить верхний и нижний колонтитулы для тега Topi c и End for p внутри тега div, используя чистые html и css.

Я сделал это, но не могу установить его нижний колонтитул, как я схожу с ума с выравниванием.

Как добавить некоторые настройки в CSS для заголовка и нижнего колонтитула:

Я создал контейнер div, внутри которого я создал другой div, который содержит содержимое внутри контейнера div.

Может кто-нибудь предложить мне это:

.masonry {
  /* Masonry container */
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
  margin: 1.5em;
  padding: 0;
  -moz-column-gap: 1.5em;
  -webkit-column-gap: 1.5em;
  column-gap: 1.5em;
  font-size: 0.85em;
}
.item {
  display: inline-block;
  background: #fff;
  padding: 1em;
  margin: 0 0 1.5em;
  width: 100%;
  -webkit-transition: 1s ease all;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-shadow: 2px 2px 4px 0 #ccc;
}

@media only screen and (max-width: 320px) {
  .masonry {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}

@media only screen and (min-width: 321px) and (max-width: 768px) {
  .masonry {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1200px) {
  .masonry {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}
@media only screen and (min-width: 1201px) {
  .masonry {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

<div class="masonry">
  <div class="item">
    <p>TOPIC</p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum
    dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet,
    consectetur adipisicing elit.
    <p>END</p>
  </div>
  <div class="item">
    <p>TOPIC</p>
    Generating random paragraphs can be an excellent way for writers to get
    their creative flow going at the beginning of the day. The writer has no
    idea what topic the random paragraph will be about when it appears.
    <p>END</p>
  </div>
</div>

Это то, что мне нужно: для каждого элемента div

Answer 1

Вы можете определить верхний и нижний колонтитулы класса и добавить класс к тегу p как

.header{
  border-bottom: 1px solid #848d95;
}

.footer{
 border-top: 1px solid #848d95;
}

Если вы хотите ограничить элемент, можете установить border radius как

.item{
 border: 1px solid  #848d95;
  border-radius: 15px;
}

.masonry {
  /* Masonry container */
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
  margin: 1.5em;
  padding: 0;
  -moz-column-gap: 1.5em;
  -webkit-column-gap: 1.5em;
  column-gap: 1.5em;
  font-size: 0.85em;
}
.item {
  display: inline-block;
  background: #fff;
  padding: 1em;
  margin: 0 0 1.5em;
  width: 100%;
  -webkit-transition: 1s ease all;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-shadow: 2px 2px 4px 0 #ccc;
  border: 1px solid  #848d95;
  border-radius: 15px;
}

.header{
  border-bottom: 1px solid #848d95;
}

.footer{
 border-top: 1px solid #848d95;
}

@media only screen and (max-width: 320px) {
  .masonry {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}

@media only screen and (min-width: 321px) and (max-width: 768px) {
  .masonry {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1200px) {
  .masonry {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}
@media only screen and (min-width: 1201px) {
  .masonry {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

<div class="masonry">
  <div class="item">
    <p class="header">TOPIC</p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum
    dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet,
    consectetur adipisicing elit.
    <p class='footer'>END</p>
  </div>
  <div class="item">
    <p class="header">TOPIC</p>
    Generating random paragraphs can be an excellent way for writers to get
    their creative flow going at the beginning of the day. The writer has no
    idea what topic the random paragraph will be about when it appears.
    <p class='footer'>END</p>
  </div>
</div>

Answer 2

Ваш код верен, вы можете обернуть нужный контент в div:

.masonry {
  /* Masonry container */
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
  margin: 1.5em;
  padding: 0;
  -moz-column-gap: 1.5em;
  -webkit-column-gap: 1.5em;
  column-gap: 1.5em;
  font-size: 0.85em;
}
.item {
  display: inline-block;
  background: #fff;
  margin: 0 0 1.5em;
  width: 100%;
  -webkit-transition: 1s ease all;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-shadow: 2px 2px 4px 0 #ccc;
}
.item-header{
  padding: 1em;
  border-bottom: 1px solid gray;
}
.item-body{
  padding: 1em;
}
.item-footer{
  padding: 1em;
  border-top: 1px solid gray;
}
@media only screen and (max-width: 320px) {
  .masonry {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}

@media only screen and (min-width: 321px) and (max-width: 768px) {
  .masonry {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1200px) {
  .masonry {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}
@media only screen and (min-width: 1201px) {
  .masonry {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

<div class="masonry">
  <div class="item">
    <!-- header-->
    <div class="item-header">
       <p>TOPIC</p>
    </div>
    <!-- body -->
    <div class="item-body">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum
      dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet,
      consectetur adipisicing elit.
    </div>
    <!-- footer-->
    <div class="item-footer">
       <p>END</p>
    </div>

  </div>
  <div class="item">
    <div class="item-header">
       <p>TOPIC</p>
    </div>
    <div class="item-body">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum
      dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet,
      consectetur adipisicing elit.
    </div>
    <div class="item-footer">
       <p>END</p>
    </div>
  </div>
</div>

Answer 3

Разделите вашу структуру div на верхний и нижний колонтитулы. Пожалуйста, проверьте ниже пример

        .masonry {
            /* Masonry container */
            -webkit-column-count: 4;
            -moz-column-count: 4;
            column-count: 4;
            -webkit-column-gap: 1em;
            -moz-column-gap: 1em;
            column-gap: 1em;
            margin: 1.5em;
            padding: 0;
            -moz-column-gap: 1.5em;
            -webkit-column-gap: 1.5em;
            column-gap: 1.5em;
            font-size: 0.85em;
        }

        .item {
            display: inline-block;
            background: #fff;
            padding: 1em;
            margin: 0 0 1.5em;
            width: 100%;
            -webkit-transition: 1s ease all;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-shadow: 2px 2px 4px 0 #ccc;
        }

        h3.header {
            text-align: center;
            border-bottom: 1px solid #ccc;
            padding: 0.5em 0;
        }

        .item-body {
            padding: 1em 1em;
        }

        h3.footer {
            text-align: center;
            border-top: 1px solid #ccc;
            padding: 1em 0px;
        }

        @media only screen and (max-width: 320px) {
            .masonry {
                -moz-column-count: 1;
                -webkit-column-count: 1;
                column-count: 1;
            }
        }

        @media only screen and (min-width: 321px) and (max-width: 768px) {
            .masonry {
                -moz-column-count: 2;
                -webkit-column-count: 2;
                column-count: 2;
            }
        }

        @media only screen and (min-width: 769px) and (max-width: 1200px) {
            .masonry {
                -moz-column-count: 3;
                -webkit-column-count: 3;
                column-count: 3;
            }
        }

        @media only screen and (min-width: 1201px) {
            .masonry {
                -moz-column-count: 4;
                -webkit-column-count: 4;
                column-count: 4;
            }
        }

<div class="masonry">
        <div class="item">
            <h3 class="header">TOPIC</h3>
            <div class="item-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum
                dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet,
                consectetur adipisicing elit. </div>
            <h3 class="footer">END</h3>
        </div>
        <div class="item">
            <h3 class="header">TOPIC</h3>
            <div class="item-body"> Generating random paragraphs can be an excellent way for writers to get
                their creative flow going at the beginning of the day. The writer has no
                idea what topic the random paragraph will be about when it appears.</div>
            <h3 class="footer">END</h3>
        </div>
    </div>

Answer 4

Я взял на себя смелость изменить ваш код, чтобы в итоге было меньше строк и обеспечить его полную адаптацию.

Я использовал два flexbox: один для .masonry, который ориентирован горизонтально (ряд) и один для .item, который ориентирован вертикально (столбец). Абзацы внутри элементов расположены по центру по горизонтали.

.masonry {
  /* Masonry container */
  display: flex;
  flex-wrap: wrap;
  margin: 1.5em;
  padding: 0;
  font-size: 0.85em;
}

.item {
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 1em;
  margin: 0 0 1.5em;
  width: 100%;
  -webkit-transition: 1s ease all;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-shadow: 2px 2px 4px 0 #ccc;
}

.item p {
  text-align: center;
}

@media only screen and (max-width: 320px) {
  .masonry .item {
    width: 100%;
  }
}

@media only screen and (min-width: 321px) and (max-width: 768px) {
  .masonry .item {
    width: 50%;
  }
}

@media only screen and (min-width: 769px) and (max-width: 1200px) {
  .masonry .item {
    width: 33.33%;
  }
}

@media only screen and (min-width: 1201px) {
  .masonry .item {
    width: 25%;
  }
}

<div class="masonry">
  <div class="item">
    <p>TOPIC</p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    <p>END</p>
  </div>
  <div class="item">
    <p>TOPIC</p>
    Generating random paragraphs can be an excellent way for writers to get their creative flow going at the beginning of the day. The writer has no idea what topic the random paragraph will be about when it appears.
    <p>END</p>
  </div>
  <div class="item">
    <p>TOPIC</p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    <p>END</p>
  </div>
  <div class="item">
    <p>TOPIC</p>
    Generating random paragraphs can be an excellent way for writers to get their creative flow going at the beginning of the day. The writer has no idea what topic the random paragraph will be about when it appears.
    <p>END</p>
  </div>
</div>