html - 使用 html 在 html 中获取所需的布局

Question

我试图有一个 div 然后在该部门内有一些不同的地方可以放置东西。例如。

<div blah>

<table blah>
content...
</table>

<table blah>
content...
</table>

<table blah>
content....
</table>


</div>

我不是真正的网络开发人员，所以我知道这个问题可能看起来很简单，但非常感谢任何帮助。哦，我正在使用 Macromedia Dreamweaver 8。

谢谢。

Answer 1

我建议使用三个不同的 div，然后使用 CSS 来放置 div。查看这篇关于 CSS 定位的 w3 学校文章：http: //www.w3schools.com/css/css_positioning.asp

Answer 2

这可能不是教程和“hello world”的地方，但这里有一些可以帮助您入门的地方：

http://jsfiddle.net/rBNUy/

HTML：

<div class="main">
    <div class="sidebar"></div>
    <div class="top"></div>
    <div class="bottom"></div>
</div>​

CSS：

.main{  /* this makes the containing box 200x200  */
   width: 200px;
   height:200px;    
    background: #eee;
}
.sidebar{ /* this makes the sidebar 100x200 and makes it stick to as far left as it can */
    background:blue;
    float:left;
    height:100%;
    width: 100px;
}
.top, .bottom{ /* this makes the boxes 96x96 and makes them stick to as far left as they can , eventually till they hit the sidebar */
   width: 96px;
   height:96px;
    float:left;
    background:red;
    border:solid 2px green;
}

注释显然被过度简化了，但从本质上讲，“浮动”将元素彼此堆叠在一起，就像在单词中堆叠字母一样。

当一个浮动元素用完空间来堆叠在同一行时，它只会跳到下一行，并找到最近的“墙”来堆叠。

Answer 3

一般来说，尽量不要将表格用于非表格数据——换句话说，不要尝试使用表格来构建网页。这是一篇可能会让您思考的好文章：http ://www.alistapart.com/articles/practicalcss/

另一方面，很多人尝试使用 w3schools 来学习 HTML 和 CSS。w3schools 对于更有经验的程序员来说是一个很好的参考，但我觉得它无法教会新手程序员大局。实际上，您从反复试验以及查看其他人的工作（源代码）中学到了很多东西。http://www.csszengarden.com/有很多网页，它们肯定会帮助您学习一些新的 HTML 和 CSS 技术。

我为您实施了一个粗略的解决方案，如果您要使用表格，您的标记将如何（可怕）看起来。

http://jsfiddle.net/Wexcode/vMXQe/

HTML：

<table id="container">
    <tr>
        <td id="sidebar"></td>
        <td id="main">
            <table>
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </table>
        </td>
    </tr>
</table>​

CSS：

table { background: #000; }
td { background: #fff; }

#container { 
    width: 600px;
    height: 400px;
    margin: 0 auto; }
#sidebar { width: 35%; }
#main { width: 65%; }
#main table { width: 100%; height: 100%; }
#main table tr { height: 50%; }