Question

我刚刚开始使用CSS和HTML。我一直试图在页面中排除一些div。我正在创建一个食谱页面，我希望它看起来像这样：每个食谱都有一个标题，左侧是图像，右侧是成分和准备步骤。我还使用了XML文档和XSL表显示这些元素。我有显示右侧的麻烦。我将只与您分享CSS代码和XSL。

CSS：

p {
    color: green;
}

.ingredients-header {    
    color:#FFF;
    font-weight:bold;
    font-size:120%;
    background-color:#339933;
    position:relative;
    left: 350px;
}

.ingredients {
    position:absolute;
    left: 400px;
}

.preparation-header {
    color:#FFF;
    font-weight:bold;
    font-size:120%;
    background-color:#339933;
    position:relative;
    top: 150px;
    left: 350px;
}

.preparation {
    position: relative;
    left: 400px;
}

XSL：

<xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns="http://www.w3.org/TR/xhtml1/strict">

<xsl:template match="/">

<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <title>Recipe</title>
</head>
<body>
 <xsl:apply-templates select="/recipes/recipe"/>    
</body>
</html>
</xsl:template>

<xsl:template match="recipe">
    <h2><xsl:value-of select="./name"/></h2>
    <div class="ingredients-header">
        <h3>Ingredients:</h3>
    </div>
    <div class="ingredients">
        <p><xsl:apply-templates select="./ingredients"/></p>
    </div>
    <div class="preparation-header">
        <h3>Preparation steps:</h3>
    </div>
    <div class="preparation">
        <ol><xsl:apply-templates select="./instructions"/></ol>
    </div>
</xsl:template>

<xsl:template match="ingredients/ingredient">
    <xsl:value-of select="./qty"/><xsl:text> </xsl:text>
    <xsl:value-of select="./unit"/><xsl:text> </xsl:text>
    <xsl:value-of select="./food"/>
    <br />
</xsl:template>

<xsl:template match="instructions/instruction">
    <li><xsl:value-of select="."/></li>
</xsl:template>

</xsl:stylesheet>

我得到这样的输出： enter image description here

任何人都可以帮我安排这些div，以便在其章节下进行准备步骤吗？

Answer 1

.ingredients {
    position:absolute;
    left: 400px;
}

有位置：绝对;而

.preparation {
    position: relative;
    left: 400px;
}

有位置：亲属;。
这可能是你问题的很大一部分。

希望这对你有所帮助

Answer 2

尝试将.ingredients更改为position：relative

.ingredients {
    position:absolute;
    left: 400px;
}

尝试删除顶部：150px;来自.preparation-header

.preparation-header {
    color:#FFF;
    font-weight:bold;
    font-size:120%;
    background-color:#339933;
    position:relative;
    left: 350px;
}

在页面中划分安排

2 个答案: