使用css和html对div进行适当的排序和样式设置

Question

我正在尝试完成我的网站设计，但我无法显示一些div并对齐它们。

这就是我想要实现的目标：

这就是我得到的：

index.php

style.css

jsFiddle：http://jsfiddle.net/wMvL5/

内容（包含'最新项目'和'最新新闻'div的中央div：

<div class="content">

            <div class="projects">
                <h1>Latest Projects</h1>

                <div class="current_projects" align="center">

                    <div class="projects_gallery" align="center">
                        <table align="center">
                            <tr align="center">
                                <td>
                                    <div class="project_desc_1">Project Description 1</div>
                                    <div class="project_desc_2">Project Description 2</div>
                                    <div class="project_desc_3">Project Description 3</div>

                                </td>
                            </tr>

                            <tr align="center">
                                <td>
                                    <div class="slide"><img src="./images/blivori.png"/ id="project1"></div>
                                    <div class="slide"><img src="./images/blivori.png"/ id="project2"></div>
                                    <div class="slide"><img src="./images/blivori.png"/ id="project3"></div>
                                </td>
                            </tr>

                            <tr>
                                <td>
                                <ol class='project_selector' align="center">
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ol></td>
                            </tr>

                            <tr align="center">
                                <td>
                                    <label id="description1">Description 1</label>
                                    <label id="description2">Description 2</label>
                                    <label id="description3">Description 3</label>
                                </td>
                            </tr>
                        </table>

                    </div>
                </div>

            </div>

            <div class="empty_div_two"></div>

            <div class="news">
                <h1>Latest News</h1>

                <div class="news_post" align="center">
                    <table align="center">
                        <tr>
                            <td style="width: 5%">►</td>
                            <td style="width: 95%"><label class="newspost1">News 1</label></td>
                        </tr>

                        <tr>
                            <td>►</td>
                            <td><label class="newspost2">News 1</label></td>
                        </tr>

                        <tr>
                            <td>►</td>
                            <td><label class="newspost3">News 2</label></td>
                        </tr>

                        <tr>
                            <td>►</td>
                            <td><label class="newspost4">News 3</label></td>
                        </tr>

                        <tr>
                            <td>►</td>
                            <td><label class="newspost5">News 4</label></td>
                        </tr>

                        <tr>
                            <td>►</td>
                            <td><label class="newspost6">News 5</label></td>
                        </tr>

                        <tr>
                            <td>►</td>
                            <td><label class="newspost7">News 6</label></td>
                        </tr>

                        <tr>
                            <td>►</td>
                            <td><label class="newspost8">News 7</label></td>
                        </tr>

                        <tr>
                            <td>►</td>
                            <td><label class="newspost9">News 8</label></td>
                        </tr>

                        <tr>
                            <td>►</td>
                            <td><label class="newspost10">News 9</label></td>
                        </tr>

                        <tr>
                            <td>►</td>
                            <td><label class="newspost10">News 10</label></td>
                        </tr>
                    </table>
                </div>

            </div>

大多数情况下，我无法显示两个div（empty_div_two），它们位于“最新项目”和“最新新闻”（分隔符）和“.misc”之间，正在显示。我也试图将“最新消息”放在div的右上角。此外，标题的border-radius似乎不起作用。

Answer 1

对于标题上的border-radius，请将其应用到.header-container而不是header。

.header-container {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
} 

要解决其他问题，请执行以下操作： SEE THE DEMO

.empty_div_two {
    background: #fff;
}

.projects {
    float: left;
    width: 60%;
}

.news {
    width: 30%;
}

.current_projects // remove width: 49%;

.content // remove width: 1184px;