网页div布局问题
我有2个div,一个30%,一个70%,带有float:left将它们并排放置在网页中。第一个div包含一些文本,一个选择控件和一个按钮。正确显示。第二个70%宽div是一个幻灯片容器。我使用JavaScript来显示幻灯片,其中包含不同大小的div。幻灯片有50px的余裕,并正确显示。我在幻灯片容器div中包含另一个div,其中包含用于浏览幻灯片的导航元素。我想把这个div放在当前幻灯片的下面,偏移50px左右,并在幻灯片宽度内居中。网页div布局问题
这里有一个图...
像这样的事情?
https://jsfiddle.net/tmqqn9aj/
的硬类来告诉你想要什么,没有看到你的代码。
添加幻灯片容器周围的幻灯片,然后使用:
position: absolute;
left: 50px;
要添加50像素左“保证金”
并添加position: relative
到70%的宽度DIV
添加您导航在幻灯片容器中,保持宽度在自动和中心对齐你的导航
好吧,刚刚看到你的代码..问题是你绝对定位.mySlides,所以导航被推到文档的顶部,因为绝对定位消除了任何相对性。
相反,绝对定位您.slideshow容器,并添加left: 50px
它,删除.mySlides
通过使用相对位置,我试图补偿调整大小的影响。 –
在较小的屏幕分辨率下,布局效果不佳。没有绝对定位.slideshow容器有没有另一种方法? –
好的谢谢。我有导航股回到正确的垂直位置。现在的问题是div填充了70%div的宽度,并且其中的元素在该宽度内居中。有没有一种方法来动态调整大小的幻灯片显示>?我的JavaScript不会为选定的幻灯片div宽度返回一个值。 –
#container{
margin:0 auto;
width:100%;
}
#leftpart{
width:30%;
height:200px;/*remove this*/
background-color:blue;/*remove this*/
float:left;
}
#contentpart{
width:70%;
height:500px;/*remove this*/
background-color:red;/*remove this*/
float:left;
}
#fixeddiv{
width:30px;
height:100px;/*remove this*/
position:absolute;
top:10px;
left:calc(30% + 5px);
background-color:cyan;/*remove this*/
padding:0px;
}
.sidediv{
margin-top:5px;
width:100%;
height:30px;/*remove this*/
background-color:violet;/*remove this*/
}
<div id='container'>
<div id='leftpart'></div>
<div id='contentpart'>
<div id='fixeddiv'>
<div class='sidediv'></div>
<div class='sidediv'></div>
</div>
</div>
</div>
哪里是你的代码
margin-left: 50px
和position: absolute;
??? – mlegg你想看到页面? –
[链接](http://www.scproject.biz/puzzlegames.php) –