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

我试图完成我的网站设计，但我有困难显示一些div和调整他们

这就是我努力实现的目标：

这就是我得到的：

jsFiddle：

内容（包含“最新项目”和“最新新闻”分区的中心分区：

<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>

最新项目
项目说明1
项目说明2
项目说明3



说明1
说明2
说明3
最新消息
►
新闻1
►
新闻1
►
新闻2
►
新闻3
►
新闻4
►
新闻5
►
新闻6
►
新闻7
►
新闻8
►
新闻9
►
新闻10

---

大多数情况下，我在显示“最新项目”和“最新新闻”之间的两个div（空div_two）时遇到困难（分隔符）和正在显示的“.misc”。我还试图将“最新消息”放在div的右上角。此外，标题的边框半径似乎不起作用。

对于标题上的

边框半径

，请将其应用于

标题容器

，而不是

标题

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

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

.empty_div_two {
    background: #fff;
}

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

.news {
    width: 30%;
}

.current_projects // remove width: 49%;

.content // remove width: 1184px;    

---

如果你给

.current_projects

一个

右边空白

，那应该可以满足空div的需要。如果你可以上传JS fiddle或者在某处给我演示，我可以帮你。但是仅仅通过pastebin发送代码是没有帮助的。这就是你的网站看起来的样子吗？因为你的屏幕截图和jsfiddle似乎有很多不同之处ence.在屏幕截图中，你的项目和新闻之间的空间在哪里？你缺少什么吗？是的，这个空白是我添加的“empty_div_two”，以便在“content”div中的“current_projects”和“news”div之间有一个垂直的分隔。它可能不会出现在JSFIDLE中，而不会出现在javasc中吗代码是jquery吗？