如何在div中添加页眉和页脚？
如何使用纯HTML和CSS在div标签内为p标签的Topic和End添加页眉和页脚。
我已经完成了，但是由于要对齐，所以无法设置页脚。
如何对CSS的页眉和页脚部分进行一些调整：
我创建了一个div容器，在其中创建了另一个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
4 个答案:
答案 0 :(得分：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>
答案 1 :(得分：0)
您的代码正确，您可以将所需的内容包装在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>
答案 2 :(得分：0)
我可以自由地修改您的代码，以减少行数并保持完全响应。
我使用了两个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>
答案 3 :(得分：0)
将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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？