Question

我正在尝试将两个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

此外，有没有更简单的方法来做我想做的事情？（当我将鼠标悬停在它们上方并显示文字时，将两张图像并排放置并让它们并排放置。）

Answer 1

在div上使用display:inline-block;代替display:block;。

使用display:inline-block，您仍然可以为元素指定宽度，与display:inline不同。块级元素将始终采用新行。

但是，您可能会注意到它们之间存在空间：

Space in between

如果需要，可以通过将其应用于父元素来轻松修复：font-size:0;。

这是关于它的fiddle。

Answer 2

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

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

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

我不能让两个div彼此相邻？

2 个答案: