0

我有一些文字，希望它更高并与第一个图标内联。这是现场直播：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>

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

4

3 回答 3

0

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

CSS 定位方法

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

演示

悬停第二张图像以显示section具有类的.chembond-content元素并且该元素不在顶部（如第一张图像）的原因是因为您将其浮动到右侧，但它仍然是该图像之后文档流的一部分您在该部分之前拥有的权利。

如果你想让这两个元素在同一个位置打开，那么你可以通过给它们一个fixedorabsolute 位置将它们从文档流中取出，在这个例子中我简单地将它设置为从顶部和右侧 20 像素。

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

于 2013-11-02T21:15:49.493 回答
0

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

.chembond-content {
   display: none;
   float: right;
   width: 400px;
   position: relative;
   top: -72px;
}
于 2013-11-02T20:43:38.387 回答
0

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

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

于 2013-11-02T20:47:50.327 回答