myproblem design is seen here(使用浏览器而不是ie)。
目标设计是在浏览器ie中观察到的,它是一个基本设计,由4个div组成:父容器div、“左”div、“右”div(内容:图像和一些文本)和“底”div(当然,意思是在前两个div下面)。
明显的问题是“右”div没有正确定位!它应该漂浮在“left”div的右侧。当然,我只使用css设计了布局,并假设代码不需要任何跨浏览器调整就发布了它。
所以百万美元的问题是……”代码中缺少什么?”

<link rel="stylesheet" type="text/css"href="http://everprint.com/css/ebay3.css" media="screen" />
<div id="container">
  <div id="topbanner" class="title">[subject]</div>
  <div id="leftbar">[logo]<br />[business]</div>
  <div id="centralbar">
    <div style="text-align:center;">[main image]</div>
    <div id="ProductDetail" class="indented">[main text]</div>
  </div>
  <div class="style:clear;"></div>
  <div id="bottombar">[business speak]</div>
</div>

以及相关的css:
身体{
边距:0;
填充:0;
文本对齐:居中;
}
#container {
  margin: 2px auto;
  text-align: left;
  width: 762px;
  height:700px;
  border: 2px dotted #777744;
}

#topbanner {
  margin: 2px;
  padding: 2px;
  border: 1px solid #777744;
  text-align:center;
}

#leftbar {
  float: left;
  width: 200px;
  height: 500px;
  margin-left: 2px !important;
  margin-left: 1px;
  padding: 2px;
  background: #f4f4f0;
  border: 1px solid #777744;
}

#centralbar {
  float: left;
  width: 547px;
  height: 565px;
  margin: 0 2px;
  padding: 2px;
  border: 1px solid #777744;
}

#rightbar {
  float: left;
  width: 200px;
  height: 565px;
  padding: 2px;
  background: #f4f4f0;
  border: 1px solid #777744;
}

#bottombar {
}

最佳答案

一切都太宽了。它都被打包到一个762像素宽的容器中,而仅仅你的#leftbar#centralbar加起来就有747像素,不考虑填充、边距和边框的额外宽度,每边最多5像素,或者说这两个分隔符的整个空间总共有767像素。由于您的浏览器必须在容器的约束下运行,如果div没有足够的空间坐在右边,它将下降到下一个可用的位置。考虑减小div的宽度,看看是否有帮助。还要确保使用Firebug这样的工具在浏览器中动态地测试容器。

09-10 06:13
查看更多