网页div布局问题

-1

我有2个div，一个30％，一个70％，带有float：left将它们并排放置在网页中。第一个div包含一些文本，一个选择控件和一个按钮。正确显示。第二个70％宽div是一个幻灯片容器。我使用JavaScript来显示幻灯片，其中包含不同大小的div。幻灯片有50px的余裕，并正确显示。我在幻灯片容器div中包含另一个div，其中包含用于浏览幻灯片的导航元素。我想把这个div放在当前幻灯片的下面，偏移50px左右，并在幻灯片宽度内居中。网页div布局问题

这里有一个图...

来源

2017-05-26 Paul Long

哪里是你的代码margin-left: 50px和position: absolute; ??? – mlegg

你想看到页面？ –

[链接]（http://www.scproject.biz/puzzlegames.php） –

像这样的事情？

https://jsfiddle.net/tmqqn9aj/

的硬类来告诉你想要什么，没有看到你的代码。

添加幻灯片容器周围的幻灯片，然后使用：

position: absolute; 
left: 50px;

要添加50像素左“保证金”

并添加position: relative到70％的宽度DIV

添加您导航在幻灯片容器中，保持宽度在自动和中心对齐你的导航

好吧，刚刚看到你的代码..问题是你绝对定位.mySlides，所以导航被推到文档的顶部，因为绝对定位消除了任何相对性。

相反，绝对定位您.slideshow容器，并添加left: 50px它，删除.mySlides

来源

2017-05-26 23:23:38

通过使用相对位置，我试图补偿调整大小的影响。 –

在较小的屏幕分辨率下，布局效果不佳。没有绝对定位.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>

来源

2017-05-27 04:13:58 HTCom

网页div布局问题

回答

相关问题