html - 我不能让两个 div 并排放置吗？

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 不同，使用 display:inline-block 您仍然可以为元素分配宽度。 block 级元素将始终占用一个新行。

但是，您可能会注意到中间有空格:

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

这是一个 fiddle关于它。