CSS 网格宽度动态内容，包括换行符

Question

在我们的网站上，我们有一个简单的基于 BB 代码的编辑器来创建我们的帖子。为了能够创建基本网格，我添加了一个新标签，它是一个带有 display:grid 和 grid-template-columns: Repeat(2, 1fr) 的简单包装器。

所以输入看起来像这样：

[easy-columns]
[box]
Text box 1
[/box]
[box]
Text box 2
[/box]
[/easy-columns]

输出将如下所示：

<div class="easy-columns">
  <div class="box">Text box 1</div>
  <br />
  <div class="box">Text box 2</div>
</div>

我的问题是换行符导致网格崩溃。

解决方案1： 所以我的第一次尝试只是将 display: none 设置为包装器内的 br 元素。但我不确定这是否适用于所有浏览器。 （我更喜欢这个非常简单的解决方案）

解决方案2： 我的第二次尝试是使用 php domdocument 通过类 easy-columns 从 div 中删除所有 br 子级。

我的 CSS 解决方案是否有效，或者只是测试环境中的一个有效“错误”？或者我应该使用 domdocument 吗？

.easy-columns {
  gap: 2em;
  align-items: stretch;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(2, 1fr);
  justify-items: stretch;
  margin-bottom: 2em;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.css-approach>br {
  display: none;
}

.box {
  background-color: grey;
  color: white;
  display: inline-block;
  padding: 2em;
  position: relative;
  text-align: left;
}

[easy-columns]<br /> [box]
<br /> Text box 1<br /> [/box]
<br /> [box]
<br /> Text box 2<br /> [/box]
<br /> [/easy-columns]
<br />
<br />
<hr />
<br />
<br />
<div class="easy-columns">
  <div class="box">
    Text box 1
  </div>
  <br />
  <div class="box">
    Text box 2
  </div>
</div>
<div class="easy-columns css-approach">
  <div class="box">
    Text box 1
  </div>
  <br />
  <div class="box">
    Text box 2
  </div>
  <div class="box">
    Text box 1
  </div>
  <br />
  <div class="box">
    Text box 2
  </div>
</div>

Answer 1

感谢您的回答。我花了一段时间，但我想我现在有了一个很好的解决方案。我最终使用了 domdocument 并尝试解释如何以及为什么。

首先这是我的 bb-to-html 函数：

bbToHtml($bb){
 $elements = array(
  array("\[h1\]\s*(.*?)\s*\[\/h1\]\s{0,2}", 
        "<h2 class=\"bb-headline\">\\1</h2>", 
        ""),
  array("\[img\-p\=([^\"]*\.(?:png|jpe?g|gif))\]\s{0,1}?", 
        "<div class=\"bb-img-wrapper portrait hover-fx-trigger\"><img src=\"gallery/articles/main/\\1\" /></div>",
     "Ui"),
  array("\[box\-simple\]\s*(.*?)\s*\[\/box\-simple\]\s{0,1}",
        "<div class=\"box-simple\">\\1</div>",
        "")
 );

 // Replacing
 foreach ($elements as $replace) {
  $modifier = "is";
  // Additional modifiers
  if(array_key_exists(2, $replace) and !empty($replace[2])){
   $modifier = $replace[2];
  }
   $bb = preg_replace("#" . $replace[0] . "#{$modifier}", $replace[1], $bb);
  }

  $bb = addInfos($bb);
  $bb = nl2br($bb);

 return $bb;
}

因为我只是替换图像而没有任何附加信息，所以我调用函数 addInfos()。

看起来像这样：

function addInfos($bb){
 // Step 1
 $dom = new DOMDocument();
 $dom->preserveWhiteSpace = false;

 $internalErrors = libxml_use_internal_errors(true);
 $dom->loadHTML(mb_convert_encoding($bb, "HTML-ENTITIES", "UTF-8"), LIBXML_HTML_NODEFDTD);
 libxml_use_internal_errors($internalErrors);

 // Step 2
 $divs = $dom->getElementsByTagName("div");

 // Step 3
 foreach ($divs as $div) {

  $class = $div->getAttribute("class");
  $children = $div->childNodes;

  switch (true) {
   // Step 4
   case strpos($class, "hover-fx-trigger") !== false:
    if(property_exists($firstchild, "tagName") and $firstchild->tagName == "img"){
     $childclass = $firstchild->getAttribute("class");
     $src = $firstchild->getAttribute("src");
     $style = $firstchild->getAttribute("style");
     $width = $firstchild->getAttribute("width");

     // creating the new html......

     $newdom = new DOMDocument();
     $newdom->loadHTML($newhtml, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
     $import = $dom->importNode($newdom->documentElement, true);
     $firstchild->parentNode->replaceChild($import, $firstchild);
    }
    break;

   // Step 5
   case strpos($class, "easy-columns") !== false:
    $easychildren = $div->childNodes;

     for ($i = $easychildren->length; --$i >= 0; ) {
      $easychild = $easychildren->item($i);
       if($easychild->nodeType === 3){
        $easychild = $easychildren->item($i);
        $easychild->parentNode->removeChild($easychild);
       }
     }
   break;
  }

 // Step 6
 $bb = substr($dom->saveHTML(), 12, -15);

 // Step 7
 $bb = str_replace(
          array("<p>", "</p>"),
          array("", ""),
          $bb
         );

 return $bb;

}

第1步：创建新的dom对象

第2步：寻找div

第3步：循环div

第4步：第一种情况寻找特定的类(hover-fx-trigger)。如果第一个子元素是图像，它会提取我创建新 html 所需的所有属性，图像将被替换。例如。 src 在数据库中查找它。

第 5 步： 换行的实际问题。首先我得到所有子节点。然后我循环并删除所有nodeType = 3 (DOMText) 的子项。因为它是一个网格，所以我只能在 easy-columns 中使用 div。

第 6 步： 保存新的 html。 DOMDocument 添加了 body 和 html 标签，我用 substr($dom->saveHTML(), 12, -15) 删除了这些标签。

第 7 步： DOMDocument 还将所有 DOMText 节点包装在一个段落中，我也不需要删除它。

我使用此函数创建 html 文件，然后将其包含在内。

欲了解更多信息，请询问。开放改进！