Question

我当前使用的是网格布局，在左列上有部分文字。在右列，我有图像。使该网格响应性工作时遇到障碍，左侧的内容与右侧的图像不一致，因为它们位于两个不同的列中。

是否可以根据截面在左网格中的开始位置始终使图像居中？我已经尝试过手动设置填充，但我希望找到一个更有效的解决方案（如果有）。

INSERT INTO block_userlist(user_id,logout_time,login_time,session_duration) SELECT user.id,user.lastaccess,user.currentlogin, (user.lastaccess - user.currentlogin) from user;

.container {
  display: grid;
  grid-template-columns: [content] 1fr [images] 1fr;
}

.content {
  grid-column: content;
  background: green;
  overflow: auto;
}

.images {
  grid-column: images;
  padding: 12%;
}

.image-one {
  background: url("http://placekitten.com/g/600/600");
}

.image-two {
  background: url("http://placekitten.com/g/500/500");
}

.image-one,
.image-two {
  height: 25%;
  width: 100%;
  margin-bottom: 12%;
  background-size: 50% auto;
  background-position: 100% center;
  background-repeat: no-repeat;
  background-color: white;
  background-attachment: fixed;
  border: 1px solid red;
}

我希望右侧网格中的<div class="container"> <div class="content"> <div class="section-one"> <h2 class="title">SECTION ONE</h2> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> <div class="section-two"> <h2 class="title">SECTION TWO</h2> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> </div> <div class="images"> <div class="image-one"></div> <div class="image-two"></div> </div> </div>和.image-one位于左侧网格中image-two和.section-one的中心。

Answer 1

问题在于图像和文本内容位于不同的容器中-您可以尝试以下方法：

将display: contents和content中的images和content用作现在仅是语义容器，并且它们的内部元素成为网格项< / em>现在（或者您可以将images和section-*容器放入html中），

将grid-column: content元素放置在image-*中，将grid-column: images元素放置在grid-auto-flow: dense中，

添加.container { display: grid; grid-template-columns: [content] 1fr [images] 1fr; grid-auto-flow: dense; /* ensures no empty grid cells */ } .content, .images { display: contents; } .section-one, .section-two { grid-column: content; /* in first column */ background: lightgreen; border: 1px solid green; } .image-one { background: url("http://placekitten.com/g/600/600"); } .image-two { background: url("http://placekitten.com/g/500/500"); } .image-one, .image-two { grid-column: images; /* in second column */ width: 100%; background-size: 50% auto; background-position: 100% center; background-repeat: no-repeat; background-color: white; background-attachment: fixed; border: 1px solid red; }，以便 images 列中不会有任何空的 grid单元格。

请参见下面的演示

<div class="container"> <div class="content"> <div class="section-one"> <h2 class="title">SECTION ONE</h2> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> <div class="section-two"> <h2 class="title">SECTION TWO</h2> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> </div> <div class="images"> <div class="image-one"></div> <div class="image-two"></div> </div> </div>

Error [ERR_STREAM_PUSH_AFTER_EOF]: stream.push() after EOF

是否可以基于网格布局的另一列将一列的内容居中？

1 个答案: