CSS 布局问题，三个盒子漂浮在容器内，而不是“接触”；

Question

我正在使用 HTML 创建布局。我有一个问题，三个盒子漂浮在一个容器内，我不希望它们接触。

这是我的 CSS 代码：

/************************** Portfolio Section ***********************************/

#portfolio-container 
{
background: darkgreen;
height: 100px;
}

#portfolio1
{
    background: blue;
    height: 100px;
    width: 330px
}

#portfolio2
{
    background: lightgreen;
    height: 100px;
    width: 330px
}

#portfolio3
{
    background: red;
    height: 100px;
    width: 330px
}

#main-content 
{
background: green;
height: 100px;
}

好的，所以我希望portfolio1、2 和3 位于portfolio 容器内。这是 HTML

<div id="portfolio-container">
    portfolio-container
</div>

<div id="portfolio1">portfolio 1</div>

<div id="portfolio2">portfolio 2</div>

<div id="portfolio3">portfolio 3</div>

<div id="main-content">
    main-content
</div>

我知道这可能有点基础，但我正在努力寻找有关此问题的具体信息。我应该使用 li 来制作列表，还是可以在 CSS 中做一些奇特的事情？

感谢您的帮助。如果您知道有用的教程，那么一些阅读材料总是受欢迎的？

Answer 1

你有这样的 html

<div id="portfolio-container">
<div id="portfolio1">portfolio 1</div>
<div id="portfolio2">portfolio 2</div>
<div id="portfolio3">portfolio 3</div>
</div>

和 css

#portfolio-container 
{
background: darkgreen;
height: 100px;
width:1000px;
float:left;
}

#portfolio1
{
    background: blue;
    height: 100px;
    width: 330px;
float:left;
}

#portfolio2
{
    background: lightgreen;
    height: 100px;
    width: 330px;
float:left;
}

#portfolio3
{
    background: red;
    height: 100px;
    width: 330px;
float:left;
}

Answer 2

您需要浮动您的 DIV。

我制作了一个有关如何执行此操作的代码示例：

http://jsfiddle.net/g5xCk/

Answer 3

我不明白你的意思，你希望它们在内部具有相同的高度，但有溢出或并排定位？具体一点。

一个在另一个下面：http://jsfiddle.net/qBwC4/4/

并排：http://jsfiddle.net/gVd8F/1/

注意：浮动是一个相当具有误导性的术语。