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在投资组合容器中。这是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/

注意：Float是一个误导性的术语。

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

3 个答案: