0

我正在尝试将两个 div 并排放置并拥有它，因此当您将鼠标悬停在图像上时会显示一些文本。这是我的 CSS：

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

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

.german-content, .chembond-content {
    display: none;
}

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

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

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

.chembond {
    float: right;
}

.german {
    float: left;
}

.german, .chembond {
    display: inline;
    overflow: hidden;
}

这是我的 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/german.png" height="60" width="50" />
                <section class="chembond-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>

这就是它目前所做的：http ://www.penguinie.co.uk/#projects

另外，有没有更简单的方法来做我想做的事情？（这是将两个图像并排放置，并在我将鼠标悬停在它们上方并出现文本时让它们并排放置）。

4

2 回答 2

5

在 div 上使用display:inline-block;而不是。display:block;

与. display:inline-block_ display:inline块级元素将始终占据新行。

但是，您可能会注意到两者之间有空格：

中间的空间

如果需要，可以通过将其应用于父元素来轻松解决此问题：font-size:0;.

这是一个关于它的小提琴。

于 2013-11-02T19:32:52.807 回答
0

一般来说，我使用@Christian 的inline-block解决方案。

但另一种可能性是使用float: left.

<div style="clear:both"></div>请记住在浮动元素之后清除浮动（例如，with ）。

于 2013-11-02T19:41:25.680 回答