主页 / user-842381

vespino's questions

Martin Hope
vespino
Asked: 2025-04-09 15:14:50 +0800 CST
  • 8

我尝试使用以下代码向 Wordpress 中的默认 Gutenberg 编辑器添加一些 CSS：

function editor_style() {
    add_theme_support( 'editor-styles' );
    add_editor_style( 'editor-style.css' );
}
add_action( 'after_setup_theme', 'editor_style' );

虽然这可行，但也使编辑器看起来很奇怪：

在此处输入图片描述

好像除了自定义样式表之外的所有样式都被删除了。这是故意的吗？我的主题里用的是 Bootstrap，我是不是也应该把 Bootstrap 也加进去？

Martin Hope
vespino
Asked: 2025-04-09 14:17:16 +0800 CST
  • 5

我正在使用以下代码来创建相册（在 WordPress 中，但对于本示例来说，这无关紧要）：

结果是这样的：

在此处输入图片描述

我希望最后一行的图片始终占据该行。所以，当只有一张图片时，将其宽度设置为 100%，高度设置为更大；当有两张图片时，将其宽度设置为 50%，高度设置为更大。

每个页面的图片数量都不一样。有什么建议吗？

.gallery {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 8px;
}

.gallery>.img {
  width: 100% !important;
  position: relative;
  padding-bottom: 75%;
}

.gallery img {
  object-fit: cover;
  object-position: 50%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
<div class="gallery">
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
  <div class="img">
    <img src="https://fastly.picsum.photos/id/266/200/300.jpg?hmac=nAZYC6vsnq4fuOzfge00Ylvi9ALRMbMA8wxBxIPTjs0">
  </div>
</div>

html