网页div布局问题

Question

我有2个div，一个30％，一个70％，浮动：左侧将它们并排放置在网页中。第一个div包含一些文本，一个选择控件和一个按钮。显示正常。第二个70％宽度div是幻灯片容器。我使用javascript来显示幻灯片，这些幻灯片包含在不同大小的div中。幻灯片的左边距为50px并正确显示。我在幻灯片容器div中有另一个div，其中包含用于浏览幻灯片的导航元素。我想将此div放在当前幻灯片下方，在幻灯片宽度的左侧和中间偏移50px。

这是一张图表......

Answer 1

这样的东西？

https://jsfiddle.net/tmqqn9aj/

如果没有看到你的代码，很难说出你想要的东西。

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

position: absolute;
left: 50px;

添加50px左边距＆＃39;

并将position: relative添加到70％宽度div

在幻灯片容器中添加导航栏，将宽度保留为自动和居中对齐导航

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

相反，绝对定位您的.slideshow容器并向其添加left: 50px，从.mySlides中移除margin-left: 50px和position: absolute;

Answer 2

(k,v \n
   test
   \n here)
(k2,v2
)

#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*/
}