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

谢谢你的回答。我花了一段时间，但我认为我现在有一个很好的解决方案。我最终使用了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 objeckt

第 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文件，然后将其包含在内。

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