html - 使用 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 的右上角。此外，页眉的边界半径似乎不起作用。

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;