Html 三个相邻的div,流体水平宽度
我需要知道如何将相邻的三个div与所有不同的背景图像对齐,中间的一个必须是989px,左div和右div的宽度不重要。Html 三个相邻的div,流体水平宽度,html,width,alignment,Html,Width,Alignment,我需要知道如何将相邻的三个div与所有不同的背景图像对齐,中间的一个必须是989px,左div和右div的宽度不重要。 <style type="text/css"> #wrapper { } #wrapper div { float : left; } #wrapper #left { width : 300px; background-image : "/path/to/an_image"; } #wrapper #cent
<style type="text/css">
#wrapper {
}
#wrapper div {
float : left;
}
#wrapper #left {
width : 300px;
background-image : "/path/to/an_image";
}
#wrapper #center {
width : 989px;
background-image : "/path/to/another_image";
}
#wrapper #left {
width : 200px;
background-image : "/you/get/the/idea";
}
</style>
<div id="wrapper">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
#包装纸{
}
#包装部{
浮动:左;
}
#包装器#左{
宽度:300px;
背景图像:“/path/to/an_image”;
}
#包装器#中心{
宽度:989px;
背景图像:“/path/to/other_image”;
}
#包装器#左{
宽度:200px;
背景图像:“/you/get/the/idea”;
}
#包装纸{
}
#包装部{
浮动:左;
}
#包装器#左{
宽度:300px;
背景图像:“/path/to/an_image”;
}
#包装器#中心{
宽度:989px;
背景图像:“/path/to/other_image”;
}
#包装器#左{
宽度:200px;
背景图像:“/you/get/the/idea”;
}
简而言之
.sides{显示:内联块;宽度:100px;边框:2px点绿色;}
#主{显示:内联块;宽度:200px;边框:2px点蓝色;}/*您可以将其更改为989px*/
第1面第2面
编辑:最终解决方案:简而言之
.sides{显示:内联块;宽度:100px;边框:2px点绿色;}
#主{显示:内联块;宽度:200px;边框:2px点蓝色;}/*您可以将其更改为989px*/
第1面第2面
编辑:最终解决方案:谢谢您的回复,但当我尝试应用此方法时,它是有效的,但当我缩小时,它不会向两侧移动。当我缩小时,我还需要它居中。你最初的问题没有提到它。如果需要居中,那么:我现在让所有div彼此对齐,尽管我需要在缩小页面时拉伸左div和右div。中间DIV标签需要989px和中间。解释在缩小页面时你的意思。你是说侧边容器需要具有动态宽度?中心容器必须垂直居中吗?有些人的屏幕比我大,所以我需要自动拉伸左右div标签,以适应访问我网站的人的屏幕。虽然中间DIV标签需要一直在页面的中间。谢谢你的回复,但是当我尝试应用这个方法的时候,它工作了,但是当我缩小时它不在边上。当我缩小时,我还需要它居中。你最初的问题没有提到它。如果需要居中,那么:我现在让所有div彼此对齐,尽管我需要在缩小页面时拉伸左div和右div。中间DIV标签需要989px和中间。解释在缩小页面时你的意思。你是说侧边容器需要具有动态宽度?中心容器必须垂直居中吗?有些人的屏幕比我大,所以我需要自动拉伸左右div标签,以适应访问我网站的人的屏幕。虽然中间DIV标签需要一直在页面的中间。
<style>
.sides {display: inline-block; width: 100px; border: 2px dotted green;}
#main {display: inline-block; width: 200px; border: 2px dotted blue;} /* you can change this to 989px */
</style>
<div class="sides">side 1</div><div id="main">main</div><div class="sides">side 2</div>