0

2 つの 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

display:inline-block;divの代わりに使用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>フローティング要素の後にフローティングをクリアすることを忘れないでください (例: を使用)。

于 2013-11-02T19:41:25.680 に答える