时间戳

首页 > 解决方案 > 超过 h1 内联网格模板区域

html - 超过 h1 内联网格模板区域

问题描述

大家好，我是 html 和 css 的新手，我有一个简单的问题：我写了这个 html 代码

<div class="ourtlimg">
            <div class="name1"><h1>Daniel Martin</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Libero aperiam commodi similique labore neque dicta.</p></div>
            <div class="name2"><h1>Craig Nobel</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Libero aperiam commodi similique labore neque dicta.</p></div>
            <div class="name3"><h1>Nicole Mark</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Libero aperiam commodi similique labore neque dicta.</p></div>

        </div>

我为类 name1、name2、name3 制作了一个网格模板区域 6 次 1fr 重复为 {port1 port1 port2 port2 port3 port3} 以显示在一行中，当我给每个类一个三个网格区域之一时，它会像图像一样显示下面。我想用网格系统将它们显示在一行中，你能帮忙吗。我希望它们横跨页面而不是页面下方 在此处输入图像描述

我为包装器添加了这个 css：

.wrapper{
display: grid;
grid-template-columns: repeat(6,1fr);
grid-template-areas:
'header header header header header header'
'navbar navbar navbar navbar navbar navbar'
'welsec welsec welsec welsec welsec welsec'
'tlinfo tlinfo tlinfo tlinfo tlinfo tlinfo'
'port1 port1 port2 port2 port3 port3'
;
}

这对于代码中的类：

.name1{
grid-area: port1;
float: left;
}
.name2{
grid-area: port2;
float: left;
}
.name3{
grid-area: port3;
float: left;
}

标签： htmlcss

解决方案

这个 CSS 代码将完成所有工作 =)

.ourtlimg {
  display: flex;
  justify-content: flex-start;
  display: -webkit-flex;
  -webkit-justify-content: flex-start;
}
<div class="ourtlimg">
  <div class="name1">
    <h1>Daniel Martin</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Libero aperiam commodi similique labore neque dicta.</p>
  </div>
  <div class="name2">
    <h1>Craig Nobel</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Libero aperiam commodi similique labore neque dicta.</p>
  </div>
  <div class="name3">
    <h1>Nicole Mark</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>Libero aperiam commodi similique labore neque dicta.</p>
  </div>

</div>

推荐阅读