小编Pau*_*e_D的帖子

我试图在通过 ID 调用包含时自动打开一个元素，例如：http://www.example.com/page.html#container。理想情况下，我希望它滚动到页面所在的位置（在摘要元素内），然后打开详细信息元素。显然，本机滚动功能工作正常，但如何将 details 元素设置为打开？

这是我的 HTML 源代码：

<details class="concentration">
   <summary>
        <h4 id="sample-slug"><?php the_sub_field('emphasis_name'); ?></h4>
    </summary>

    <p><?php the_sub_field('emphasis_description'); ?></p>

    <div class="courses"><?php the_sub_field('emphasis_course_list'); ?></div>
</details>

当 example.com/page.html#sample-slug 被调用时，如何让 details 元素意识到这一点并添加“open”属性？我想确保在调用锚点时内容可见。

我有一个显示为flex的div。在div内还有其他3个元素。我希望第一个元素的宽度为100％，第二个和第三个元素应保持彼此相邻。

示例代码： Codepen

#flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
}
#flex-container > .flex-item {
  -webkit-flex: auto;
  flex: auto;
}
#flex-container > .raw-item {
  width: 5rem;
}
#flex-container {
  width: 100%;
  font-family: Consolas, Arial, sans-serif;
}
#flex-container > div {
  border: 1px solid #f00;
  padding: 1rem;
}
#flex-container > .raw-item {
  border: 1px solid #000;
}
.fullwidth {
  background-color: yellow;
}

<div id="flex-container">
  <div class="fullwidth">full swidth</div>
  <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
  <div class="raw-item" …

我目前有一个 SVG，它是英国地图，我向 SVG 添加了一些圆形元素，这些元素将用作位置标记。

<circle id="newcastle" cx="123.79" cy="152.28" r="2" fill="#ff671f"></circle>

理想情况下，我希望使用选择器

#newcastle:hover::after { ... }

当用户将鼠标悬停在位置标记上时创建一个伪元素，但这似乎不起作用。

我在网上看过，但大多数文章似乎都与在伪元素中使用 SVG 相关，而不是相反。目前是否可以向 SVG 元素添加伪元素，或者这不在规范内？如果没有，是否有任何解决方法可以实现这种效果？

请不要黑客攻击

没有硬编码。这个想法不是解决一种情况，例如有 4 列的情况，而是解决动态内容和响应屏幕尺寸的问题。

对我来说问题是它基本上不是直接的孩子，而是它的内容

代码笔在这里：

https://codepen.io/anon/pen/OxzrzV

超文本标记语言

<h1>disclaimer: resize the window. Make the blue headers in a row match height</h1>
<div class="row mycontainer">
  <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala </div>
    </div>
  </div>
    <div class="col-12 col-md-4 col-lg-3">
      <div class="item">
       <div class="header">bippo</div>
        <div class="content">some content lala </div>
      </div>
  </div>
  <div class="col-12 col-md-4 col-lg-3">
    <div class="item">
       <div class="header">bippo</div> …

为什么 css grid-column 属性采用多个值，如下所示：

grid-column: <column-start> / <column-end>;

通常，具有多个值（例如边框半径）的属性会将它们用空格分隔。这里它们用斜杠分隔。为什么是这样？

I\xe2\x80\x99m 试图实现一个非常具体的网格来展示一些项目。这个想法是创建一个重复循环，其中第一个、第二个、第三个、第四个和第五个项目具有不同的样式（并且样式随后重复）。

例如：第一个红色背景/第二个蓝色背景/第三个绿色背景/第四个黄色背景/第五个黑色背景，并循环项目数量（可能是5个或28个）。因此，您将拥有：#1红色/#2蓝色/#3绿色/#4黄色/#5黑色/#6红色/#7蓝色/#8绿色/#9黄色等

我想使用纯 CSS 来创建这个循环。我使用 webflow，因此内容在列表中一一填充，我需要根据列表中的位置调整基本样式。

到目前为止我尝试过使用 nth-child ，如下所示：

.collection-list:nth-child(2n) .collection-item {}\r\n.collection-list:nth-child(3n) .collection-item {}\r\n.collection-list:nth-child(4n) .collection-item {}\r\n.collection-list:nth-child(5n) .collection-item {}

\n\n

它适用于前 5 个项目\xe2\x80\xa6，但是\xe2\x80\xa6\n我的问题是，它\xe2\x80\x99t 似乎完全作为循环工作\xe2\x80\xa6，我想它\xe2\x80\x99s 因为 2n 和 3n 有时会发生冲突（例如当你有 2*3 时）。我可以 \xe2\x80\x99t 对 nth-child 使用奇数和偶数，因为这个想法是让它仅在 5 个项目 \xe2\x80\xa6 之后循环

有人对此有什么绝妙的想法吗？仅仅使用 CSS 就可以实现吗？

谢谢！

我创建了一个 flex-box 容器，其中包含更多图像和一个 div 段落。一旦我启用使用“flex-wrap:wrap;”包装 in css，段落中的文本就不再换行，导致框断行并出现在下一个中。附上相关的 css 代码和正文本身。

.itembox {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  flex-grow: 1;
  margin-top: 10px;
  margin-bottom: 10px;
  /*flex-shrink:0;*/
  /*flex: 1 1 0;*/
  /*justify-content: space-between;*/
  /*flex-basis:100px;*/
  /*flex-wrap:wrap;*/
}

<div class="itembox">
  <div class="aritem">
    <p>
      <img src="img/digital media 200p.png" style="height:200px; width:200px;" />
    </p>
    <p class="bold caps">social media management</p>
    <div class="aritemtext">
      <p class="article">
        <!--managing your presence on various social media platforms so your followers always get the latest updates.-->
        manage your presence and content on social media …

我的 HTML 代码中有三个元素。我想将元素固定在右侧，而不将其从文档流中删除。

<div class="container">
   <header class="main-header">
   </header>
   <main class="main-content">
   </main>
   <footer class="main-footer">
   </footer>
</div>

这是我正在使用的CSS代码

.container {
   display: grid;
   grid-template-columns: 1fr 3fr;
   grid-template-rows: auto auto;
}
.main-header{
   grid-column: 1/2;
   grid-row: 1/3;
   /* Here i want this to be fixed (scrolling should not have any effect)*/
   position: fixed;
  }

位置固定将其从文档流中删除，一切看起来都很丑陋。谁能告诉我如何在不使用position:fixed;的情况下实现这一目标？或者不将其从文档流中删除。

我有一个填充整个水平空间的布局，并且由于网格布局，最后一行中的项目仍然与其他行具有相同的宽度。

现在，当调整屏幕大小时，项目的宽度会发生变化，以便填充整行。是否可以将项目的宽度固定并调整网格间隙？

https://jsfiddle.net/c60ymrfu/

当前CSS：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 20px;
  grid-gap: 5px;
}

当前行为：

期望的行为：

我有这个 CSS 网格设置，它运行得很好，在桌面上查看时显示 6 列，在移动设备上查看时折叠到 1 列。

但是，我希望在移动设备上查看时它能折叠为 2 列而不是 1 列，我不知道需要更改什么才能做到这一点。

/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
        text-align: center;
}

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

//*  GRID OF SIX  */
.span_6_of_6 {
    width: 100%;
}

.span_5_of_6 {
    width: …