CSS位置方法

Question

我有一些文字，希望它更高，并与第一个图标内联。这就是现场：http://www.penguinie.co.uk/#projects css是：

.german img {
    height: 100;
    width: 100;
    padding: 2px 2px 1px 2px;
}

.german img:hover {
    border: 1px solid #2e8ece;
    border-radius: 10px 10px 10px 10px;
}

.german-content {
    display: none;
    float: right;
    width: 400px;
}

.german:hover .german-content {
    display: inline-block;
    border: 1px solid;
}

.german-content p {
    font-size: 15px;
    font-weight: normal;
    line-height: 30px;
    word-spacing: 5px;
    color: black;
}

.chembond img {
    height: 100;
    width: 100;
    padding: 2px 2px 1px 2px;
}

.chembond img:hover {
    border: 1px solid #2e8ece;
    border-radius: 10px 10px 10px 10px;
}

.chembond-content {
    display: none;
    float: right;
    width: 400px;
}

.chembond:hover .chembond-content {
    display: inline-block;
    border: 1px solid;
}

.chembond-content p {
    font-size: 15px;
    font-weight: normal;
    line-height: 30px;
    word-spacing: 5px;
    color: black;
    overflow: scroll;
}

这是HTML：

        <section id="projects-content">
            <p>Projects</p>
            <section class="german">
                <img src="assets/img/german.png" height="60" width="50" />
                <section class="german-content">
                    <p>I started this project because I have seen many students in my German class keep on getting the tenses wrong by putting verbs in the wrong places, missunderstanding past participles etc... so I started this to help students (or anyone) understand the sometimes confusing German tenses. Each tense page consistes of three sub-sections: a question, an answer and a statement. These then in turn include an example and an explanation. If you were to hover over some of the words then a popup box will appear, explaining the use of the word. You can see it <a href="projects/german/">here</a> (please bare in mind that this is still a work in progress). If you want to email me a tip about it, or just ask me about it then don't hesitate to contact me.</p>
                </section>
            </section>
            <section class="chembond">
                <img src="assets/img/bonding.png" height="60" width="50" />
                <section class="chembond-content">
                    <p>This isn't much of a project, more homework. In Science we were asked to create a poster on the different types of bonding (ionic, metallic, covalent, etc) and I naturally said no as I cannot draw and hate making posters. I then did it as homework and made a website. It was a joint website with my friend <a href="ejayc.co.uk">Elliott</a> who did all the drawings/images, I then wrote the code. If you are wondering if my teacher like it then I can tell you that he did. If you want to see it then click <a href="projects/bonding/">here.</a> I know there is one mistake in the image but I have put a note at the bottom of that section.</p>
                </section>
            </section>
        </section>

因此，当我将鼠标悬停在第二个图标上时，我希望框中的文字与您将鼠标悬停在第一个图标上时的高度相同。

Answer 1

以下是您应该添加到CSS中的内容：

.chembond-content {
   display: none;
   float: right;
   width: 400px;
   position: relative;
   top: -72px;
}

Answer 2

您可以在CSS中添加带负值的margin-top，但不是。

一个更易于维护的解决方案是只有一个<section class="content">标记，对齐它，并且当将鼠标悬停在相关图标上时，JS会更改文本。

Answer 3

在这里使用简单的CSS和HTML提出问题时，请考虑使用jsFiddle并共享而不是个人链接，否则当这个工作正常并且您的实时链接发生变化时，问题将无关紧要。

CSS位置方法

所以这是我的小提琴减去一些代码混乱：

Demo

第二个图像悬停以显示section类.chembond-content并且元素不在顶部（如第一个图像）的原因是因为您将其浮动到正确但它仍然是该部分之前的图像之后的文档流程的一部分。

如果你想让两个元素在同一个地方打开，你可以通过给它们fixed或absolute位置将它们从文档流中取出来，在这个例子中我简单地设置它从顶部到右边20像素。

由于这些元素不占用标记流程中的空间，因此如果您愿意，可以自由地将它们放在顶部。

如何使文本与其他文本的高度相同？

3 个答案:

CSS位置方法

Demo