ウェブページのdivレイアウトの問題

Question

2つのdiv、1つの30％、1つの70％、浮動小数点：leftをウェブページに並べて配置します。最初のdivにはテキスト、選択コントロール、ボタンが含まれています。適切に表示されます。 2番目の70％幅のdivはスライドショーコンテナです。私はjavascriptを使用して、さまざまなサイズのdivに含まれるスライドを表示します。スライドの余白は50ピクセルあり、適切に表示されます。私は、スライドショーコンテナdiv内に、スライドショーをナビゲートするためのナビゲーション要素を含む別のdivを持っています。このdivを現在のスライドの下に配置し、スライドの幅内で左に50pxずらしてオフセットします。ここ

は図だ...

Answer 1

このような何か？

https://jsfiddle.net/tmqqn9aj/

あなたのコードを見ることなく、あなたが欲しいものを伝えるのは難しいの種類。

あなたのスライドの周りにスライドコンテナを追加して使用します。

position: absolute; 
left: 50px; 

は50pxを追加するには、「余白」を左

、70％の幅のdivに

をposition: relativeを追加するには、ナビゲーションバーを追加スライドコンテナの内側で、幅をオートとセンターに合わせてください。

問題はあなたが絶対に.mySlidesを配置していることで、絶対位置が相対座標を取り除くので、navがドキュメントの先頭にプッシュされているということです。

代わりに、絶対にあなたの.slideshowコンテナを配置し、それにleft: 50pxを追加し、あなたのコードがどこにある.mySlides

Answer 2

#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>