Question

我试图将第一行文本放置在整行上，第二行放置在行的一半上，第三行放置在行的另一半上，但我不知道为什么不行

.news-content{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  
}
.news-content.butoane{
  grid-row:1/3;
  grid-column:1/3;
}
.news-content.imagine{
  grid-row:2/3;
  grid-column:1/2;
}
.news-content p{
  grid-row:2/3;
  grid-column:2/3;
}

<div class="news-content">
  <div class="butoane">
     <button>Butonul1</button>
  <button>Butonul2</button>
    <p>FIRST TEXT FIRST TEXT sit amet consectetur adipisicing elit. Tenetur, ipsa! efgkermgmergmermgergmerirmg</p>
  </div>
 <div class="imagine">
<p> SECOND TET SECOND TEXT  amet consectetur adipisicing elit. Harum deserunt perspiciatis autem aspernatur! Eum, a facilis qui maxime esse omnis consectetur tempore quisquam veritatis tenetur repudiandae, modi, fuga placeat est.</p>
  </div>
  <p>LAST TEXT LAST TEXT sit amet consectetur adipisicing elit. Cum, praesentium laboriosam obcaecati quae officia officiis voluptatem quia illum dicta mollitia itaque. Veniam labore quo itaque molestias quaerat, omnis cupiditate numquam!</p>
</div>

Answer 1

由于您的CSS选择器，它不起作用，.news-content.butoane选择具有这两个类的元素，.news-content .butoane选择.butoane内的.news-content

.news-content{
  display: grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);

}
.news-content .butoane{
  grid-row:1/3;
  grid-column:1/3;
}
.news-content .imagine{
  grid-row:2/3;
  grid-column:1/2;
}
.news-content p{
  grid-row:2/3;
  grid-column:2/3;
}

https://jsfiddle.net/wwWaldi/hy4pbnzx/1/

我无法使用CSS网格定位我想要的东西

1 个答案: