Question

<!DOCTYPE html>
<hmtl>
    <body>
        <header><h1>This is header</h1></header>
            <section id="main">
                <section id="topBlock">
                    <section id="sectionWithUList">...</section>
                    <section id="sectionWithImage">...</section>
                    <section id="anotherSectionWithUList">...</section>
                <section>
                <section id="anotherBlock">
                    ...
                <section>
            </section>
        <footer><h5>This is header</h5></footer>
    <body>
<html>

这是我第一次写HTML5页面。我认为它会像这样。标题，主要部分和页脚。在这个主要部分的顶部，我有一个部分有三个部分（两个列表和一个图像）。但我有一个造型问题。我为'topBlock'写css来显示：table;而它的三个部分是表格单元格因为它们需要显示在一行中。但是当我添加带有列表的图像部分时，它变得太大而列表是以verticaly为中心的。我尝试将固定高度添加到topBlock部分，但没有任何帮助。我需要一点帮助才能使这个topBLock内部有三个内联部分。

Answer 1

尝试在各个部分添加垂直对齐。

#topBlock { display:table; }    
#topBlock section { vertical-align:top; display:table-cell; }

Answer 2

在示例中，topBlock和anotherBlock部分未正确关闭，有一个部分打开标记应该是</section>

如何在HTML5中放入三个内联部分

2 个答案: