Html XSL。以两列或多列并排显示数据_Html_Css_Xml_Xslt

Html XSL。以两列或多列并排显示数据

html css xml xslt

Html XSL。以两列或多列并排显示数据,html,css,xml,xslt,Html,Css,Xml,Xslt,我有以下XSL、XML和CSS： <?xml version="1.0" ?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="xml" omit-xml-declaration="yes" indent="yes" /> <!-- Indentation. HTM

我有以下XSL、XML和CSS：

 <?xml version="1.0" ?>
      <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
      <xsl:output method="xml" omit-xml-declaration="yes" indent="yes" />

      <!-- Indentation. HTML output beautifier-->
      <xsl:strip-space elements="*"/>
      <xsl:template match="/">
           <xsl:copy-of select="."/>
      </xsl:template>

      <xsl:template match="/">
           <html>
                <head>
                     <title><xsl:value-of select="doc/page/name"/></title>
                     <link rel="stylesheet" type="text/css" href="styles.css" />
                </head>
                <body>
                     <xsl:for-each select="doc/item">
                          <div class="item">
                                <xsl:apply-templates/>
                          </div>
                     </xsl:for-each>
                </body>
          </html>
    </xsl:template>

    <!-- XML <value> -->
    <xsl:template match="doc/item/section/row">
         <p>
              <xsl:for-each select="value">
                   <xsl:value-of select="."/><br />
              </xsl:for-each>
         </p>
    </xsl:template>

    <!-- XML <section name> -->
    <xsl:template match="doc/item/section/name">
          <p><strong><xsl:value-of select="."/></strong></p>
    </xsl:template>

    <!-- XML <item name> -->
    <xsl:template match="doc/item/name">
         <p><strong><xsl:value-of select="."/></strong></p>
    </xsl:template>

</xsl:stylesheet>

由于CSS.item类，输出正确地并排显示在两列上

但现在我想取得以下成果：

其中，视频分辨率、视频格式、权重位于最左边的列上，且垂直间隔正确，处于相应值的正确高度

由于我刚刚开始学习XSL，我想知道这是可以用XSL实现的，还是必须用CSS来实现

我不喜欢使用HTML表格作为后记，我希望使用一些javascript效果来隐藏和显示我将保留在div中的列。

XSL用于将XML转换为HTML。CSS用于“样式化”。这两个不能代替另一个。我想知道的是，这可以用XSL来完成吗？这到底是什么？向我们展示你想要实现的HTML代码，并解释从输入中生成它的规则。绘图不是代码。恐怕你已经失去了我。如果上面的XSL+XML生成您想要的HTML代码，那么您的问题是什么？如果他们没有，那么你必须向我们展示你想要的HTML代码。如果你不确定你想要什么HTML代码，那么你的问题不是关于XSLT的。@Nicero没有人攻击你，没有必要采取防御措施。只是根本不清楚你在问什么。这是一个编码论坛；我们可以帮助您编写产生已知结果的代码。现在还不知道你的结果。

<?xml version="1.0" encoding="utf-8"?>
<doc>
     <page>
          <name>GoPro</name>
     </page>
     <item>
          <name>GoPro Hero 4 Black</name>  
          <section>
               <name>Video resolution</name>
               <row>
                    <value>4K</value>
                    <value>30, 25, 24</value>
                    <value>Ultra wide</value>
                    <value>3840x2160</value>
                    <note></note>
               </row>
               <row>
                    <value>4K Superview</value>
                    <value>24</value>
                    <value>Ultra wide</value>
                    <value>3840x2160</value>
                    <note></note>
               </row>
               <row>
                    <value>WVGA</value>
                    <value>240</value>
                    <value>Ultra wide</value>
                    <value>848x480</value>
                    <note></note>
               </row>
          </section>
          <section>
               <name>Video format</name>
               <row>    
                    <value>H.264 codec, .MP4 file format</value>
                    <note></note>
               </row>
          </section>
          <section>
               <name>Weight</name>
               <row>    
                    <value>88g (3.1oz)</value>
                    <value>With housing: 152g (5.4oz)</value>
                    <note></note>
               </row>
          </section>
     </item>
     <item>
          <name>GoPro Hero 4 Silver</name>
          <section>
               <name>Video resolution</name>
               <row>
                    <value>4K</value>
                    <value>15, 12.5</value>
                    <value>Ultra wide</value>
                    <value>3840x2160</value>
                    <note></note>
               </row>
               <row>
                    <value>-</value>
                    <value>-</value>
                    <value>-</value>
                    <value>-</value>
                    <note></note>
               </row>
               <row>
                    <value>WVGA</value>
                    <value>240</value>
                    <value>Ultra wide</value>
                    <value>848x480</value>
                    <note></note>
               </row>
          </section>
          <section>
               <name>Video format</name>
               <row>
                    <value>H.264 codec, .MP4 file format</value>
                    <note></note>
               </row>
          </section>
          <section>
                <name>Weight</name>
                <row>
                     <value>83g (oz)</value>
                     <value>With housing: 147g (oz)</value>
                     <note></note>
                </row>
          </section>
     </item>
 </doc>

 .item {
      width: 250px;
      float: left;
 }

                   | GoPro 3 Black    | GoPro 3 Silver
----------------------------------------------------------
| Video resolution | 4K               | 4K               |
|                  | 30, 25, 24       | 15, 12.5         |
|                  | Ultra wide       | Ultra wide       |
|                  | ...              | ...              |
|                  |                  |                  |
| Video format     | H.264            | H.264            |
|                  | ...              | ...              |
|                  |                  |                  |