Question

我目前正在为大学做一个项目，我必须使用css / html创建一个简单的网站。我正在尝试调整我的一个页面，但是当我执行各种元素（照片，表格和带有文本的框）时，所有这些元素都会彼此叠加而不是像我们在其他所有页面上那样在彼此之下移动。

HTML（相对于播放的部分）：

    <aside id="Name">
    <h3>Michael Freeman </h3>
    </aside>


    <aside id="Photo">
    <img src="images/me.jpg" alt="Picture of me" /> 
    </aside>

    <section id="Table">
    <table>
    <caption>My Timetable</caption>
    <tr>
        <th>Time</th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday </th>
        <th>Thursday</th>
        <th>Friday</th>
    </tr>
    <tr>
        <td>8:30</td>
        <td class="emptydata"></td>
        <td>Database Analysis and design</td>
        <td class="emptydata"></td>
        <td>Introduction to .net programming</td> 
        <td class="emptydata"></td>
    </tr>
    <tr>
        <td>10:30</td>
        <td>Internet Technologies((lab))</td>
        <td>Database Analysis and design((lab))</td>
        <td class="emptydata"></td>
        <td class="emptydata"></td> 
        <td class="emptydata"></td>
    </tr>   
        <tr>
        <td>12:30</td>
        <td class="emptydata"></td>
        <td class="emptydata"></td>
        <td class="emptydata"></td>
        <td>Internet Technologies</td> 
        <td class="emptydata"></td>
    </tr>
    <tr>
        <td>2:30</td>
        <td class="emptydata"></td>
        <td class="emptydata"></td>
        <td class="emptydata"></td>
        <td class="emptydata"></td> 
        <td class="emptydata"></td>
    </tr>
    <tr>
        <td>4:30</td>
        <td class="emptydata"></td>
        <td class="emptydata"></td>
        <td class="emptydata"></td>
        <td class="emptydata"></td> 
        <td class="emptydata"></td>
    </tr>
    <tr>
        <td>5:30</td>
        <td class="emptydata"></td>
        <td class="emptydata"></td>
        <td class="emptydata"></td>
        <td>Introduction to programming.net</td> 
        <td class="emptydata"></td>
    </tr>
    </table>



    </section>
</article>

和css：

Table{
height:4%;
Width:8%;
Color:#080000;
Margin-right:auto;
Margin:auto;
Text-align:center;
Margin-bottom:10%;
Margin-left:auto
}
tr{
border: 2px solid #080000;
}
td
{border:2px solid #080000;
background-color:rgb(255,255,255);
}
td.emptydata
{
background:#080000;
}
.emptydata:hover
{
background: red;
}
#Name
{Background-image:url(Images/Back.jpg);
text-align:right;
float:right;
margin-right:auto;
margin-left:auto;
Margin-top:5%;
Border: 3px Solid #080000;
Font-size:150%;
Padding:1%;}
#Photo
{height: 4%;
Width:10%;
Float:left;
Padding-right:10%;
Margin-left:auto;
Margin:auto;
Border: 10px groove black;}

任何帮助将不胜感激！

Answer 1

嘿Kaleon是你想要的 Fiddle 吗？

我使用了display:inline-block;

看看并告诉我它是否对你有帮助。

我清理了你的代码。请注意CSS中的大写字母。

编辑

根据此处的要求更新代码： Fiddle

Divs在调整大小时坐在彼此之上（HTML CSS）

1 个答案: