div在css问题中有三个子div答案

【问题标题】：div having three child div's inside css issuediv在css问题中有三个子div
【发布时间】：2011-07-20 20:03:06
【问题描述】：

我正在准备网站页面结构，但卡在这里

HTML

<div id="main">
   <div id="left"></div>
   <div id="content"></div>
   <div id="right"></div
</div>

css

#main
{
  background: url("../images/bkg_main1.gif") no-repeat scroll 50% 0 #FBFAF6;
  width: 100%;
}
#left
{
  float:left;
}
#content
{
  width:997px;
  margin:0 auto;
}
#right
{
  float:right;
}

left div应该出现在它正在出现的页面的左侧，content div应该出现在中间，它也出现在中间，right div应该出现在页面的右侧。右侧的 div 出现在页面的右侧，但它出现在右下角。

【问题讨论】：

#main 太小 ;) 由于#main 由窗口宽度设置，使窗口太小而无法容纳内容将导致#right 下降到下方。弹出一些边框：1px solid #f0f;在你的 div 周围看看他们在做什么

标签： html css

【解决方案1】：

试试这个方法

<div id="main">
   <div id="left"></div>
    <div id="right"></div>
   <div id="content"></div>   
</div>

【讨论】：

【解决方案2】：

您需要将两个浮动 div（左右）放在内容之前。

此外，您应该为浮动元素定义一个宽度，并为内容定义一个左右边距（等于宽度），或者如果浮动足够大，它可以“下降”。

【讨论】：

【解决方案3】：

#left, #content, #right {
    float: left;
}

【讨论】：