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这样的工具在浏览器中动态地测试容器。