CSSのページの右側にdivを保持する方法

私はウェブサイトを構築していますが、div要素をページの右側に貼り付けようとしています。しかし、ブログの投稿データ/画像を含む他のdivが次のページにスクロールすると、divが入力されます。ブログの投稿をスクロールさせながら右側の列が入力されないようにするにはどうすればよいですか？CSSのページの右側にdivを保持する方法

これは私のコードですが、どういう意味ですか。これが初心者の質問であればごめんなさい（本当にそうです）。私が得ることができるすべての助けに感謝します。おかげさまで

.column { 
    float:left; 
} 

.column.main { 
    width:70%; 
    min-height:1px; 
} 

.column.side { 
    width:20%; 
    min-height:1px; 

} 

.column.left { 
    width:10%; 
    background-color:012C40; 
    height:85%; 
    min-width:1px; 
} 

.column.right { 
    width:10%; 
    background-color:012C40; 
    height:85%; 
    float:right; 
    min-height:1px;  
} 


.postAd { 
    width:19%; 
    height:32%; 
    float:left; 
    background-color:DAEBF2; 
    text-align:center; 
    display:inline-block; 
    margin:.5%; 
    overflow: auto; 
} 

.postAd img { 
    width:80%; 
    height:80%;*/  
} 



<div class="column left"> 
</div> 
<!--middle content--> 

<div class="postAd"> 

    <img src="images/Sunset.JPG" alt="sunset"> 
    <p>Text here!</p> 
</div> 

<div class="postAd"> 

    <img src="images/Sunset.JPG" alt="sunset"> 
    <p>Text here!</p> 
</div> 

<div class="postAd"> 

    <img src="images/Sunset.JPG" alt="sunset"> 
    <p>Text here!</p> 
</div> 

<div class="postAd"> 

    <img src="images/Sunset.JPG" alt="sunset"> 
    <p>Text here!</p> 
</div> 

<div class="postAd"> 
</div> 

<!--right side content--> 

<div class="column right"> 
</div>

まず、提案されたすべてのソリューションに感謝します。しかし、私はそれぞれを試しましたが、私は問題にぶち当たっています。私は自分のウェブサイトの上にナビゲーションバーを持ち、それぞれがそのバーを上書きします。私がアダプテーションをしようとすると、以前と同じ問題が発生します。ウェブサイトのレイアウトを完全に破壊することなく、これらを実装するにはどうすればよいですか？

もう一度、感謝してくれたすべての人に感謝します。

出典

2017-12-06 GarrukApex

必要に応じて、両方のdivに['position：fixed']（https://www.w3schools.com/cssref/pr_class_position.asp）を使用し、それに応じて本体の幅を調整することができます彼らは重複しませんが、これは、応答性のために調整するときに問題を提起するかもしれませんが – Swellar

[ブートストラップ]（http://getbootstrap.com/）を使用して簡単に3列を作成し、内容を中央の列に入れてください – Swellar

doライブページはどこかでホストされていますか？デバッグするのが簡単になるでしょう。うーん、多分ポジションを試してみてください。 –

あなたは私はあなたがユーチューブにthisビデオを見ることをお勧めのような

.parent 
{ 
display:flex; 
} 

.right 
{ 
flex:1; /*which is equal to 1 portion of width */ 
} 
.left 
{ 
flex:1; /*which is equal to 1 portion of width */ 
} 
.center 
{ 
flex:8; /*which is equal to 8 portion of width */ 
}

下のフレックスポジショニングを使用することができます。

出典

2017-12-06 03:53:51 nAviD

さまざまな方法があります。簡単なものの一つが使用する：

表示：表セル

Iは、例えば、中央の列を追加しました。

.column { 
 
    display:table-cell; 
 
    vertical-align:top; 
 
} 
 

 
.column.left { 
 
    width:10%; 
 
    background-color:#012C40; 
 
    color:#ffffff; 
 
} 
 
.column.right { 
 
    width:10%; 
 
    background-color:#012C40; 
 
    color:#ffffff;  
 
} 
 

 

 
.postAd { 
 
    min-width:23.5%; 
 
    height:32%; 
 
    background-color:#DAEBF2; 
 
    text-align:center; 
 
    display:inline-block; 
 
    margin:0.5%; 
 
    overflow: auto; 
 
} 
 

 
.postAd img { 
 
    width:80%; 
 
    height:80%; 
 
}

<div class="column left"> 
 
[column left] 
 
</div><!-- .column.left --> 
 

 
<div class="column middle"> 
 
<div class="postAd"> 
 
    [image] 
 
    <p>Text here!</p> 
 
</div> 
 
<div class="postAd"> 
 
    [image] 
 
    <p>Text here!</p> 
 
</div> 
 
<div class="postAd"> 
 
    [image] 
 
    <p>Text here!</p> 
 
</div> 
 
<div class="postAd"> 
 
    [image] 
 
    <p>Text here!</p> 
 
</div> 
 
<div class="postAd"> 
 
    [image] 
 
    <p>Text here!</p> 
 
</div> 
 
</div><!-- .column.middle --> 
 

 
<div class="column right"> 
 
[column right] 
 
</div><!-- .column.right -->

出典

2017-12-06 04:27:26 signal2013

私はあなたが

に左右の列を行うために探しているこの何を考えて位置する必要があります：右の列の幅のために、その後150ピクセル：その後、私はちょうど置く固定幅：中間のコンテンツマージンを設定しました。左：150ピクセル、余白 - 右：150ピクセル。それはすべてのだと私はフレックスワープを表示するために中央のコンテンツにアイテムに使用

このコード

：ここ

flex-wrap: wrap; 
padding: 0; 
display: -webkit-box; 
display: -moz-box; 
display: -ms-flexbox; 
display: -webkit-flex; 
align-items: left; 
justify-content: left;

コードです：

<!DOCTYPE html> 
<html> 
<head> 
<style> 

* { 
    box-sizing: border-box; 
} 

body { 
    margin: 0; 
} 
html { 
    height: 100%; 
} 

.column-left { 
    height: 100%; 
    width: 15%; 
    position: fixed; 
    z-index: 999; 
    top: 0; 
    left: 0; 
    background-color: #d6c4ff; 
    overflow-x: hidden; 
    padding-top: 60px; 
} 

.column-right { 
    height: 100%; 
    width: 15%; 
    position: fixed; 
    z-index: 999; 
    top: 0; 
    right: 0; 
    background-color: #d6c4ff; 
    overflow-x: hidden; 
    padding-top: 60px; 
} 
.middle-content{ 
    margin-left: 17%; 
     margin-right: 17%; 
     height: 100%; 
    padding: 0; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    flex-wrap: wrap; 
    align-items: left; 
    justify-content: left; 
    } 
.postAd { 
    width:19%; 
    height:32%; 
    float:left; 
    background-color:#DAEBF2; 
    text-align:center; 
    display:inline-block; 
    margin:.5%; 
    overflow: auto; 
} 

.postAd img { 
    width:80%; 
    height:80%;*/  
} 

</style> 
</head> 
<body> 



<!--left side content--> 
<div class="column-left"> 
</div> 

<!--middle content--> 
<div class="middle-content"> 
<div class="postAd"> 

    <img src="images/Sunset.JPG" alt="sunset"> 
    <p>Text here!</p> 
</div> 

<div class="postAd"> 

    <img src="images/Sunset.JPG" alt="sunset"> 
    <p>Text here!</p> 
</div> 

<div class="postAd"> 

    <img src="images/Sunset.JPG" alt="sunset"> 
    <p>Text here!</p> 
</div> 

<div class="postAd"> 
    <img src="images/Sunset.JPG" alt="sunset"> 
    <p>Text here!</p> 
</div> 

<div class="postAd"> 
    <img src="images/Sunset.JPG" alt="sunset"> 
    <p>New here!</p> 
</div> 
<div class="postAd"> 
    <img src="images/Sunset.JPG" alt="sunset"> 
    <p>New here!</p> 
</div> 

</div> 

<!--right side content--> 

<div class="column-right"> 
</div> 
</body> 
</html>

出典

2017-12-06 04:36:56 Liam

-2

あなたは使用する必要があります位置：固定;右のdivに。

出典

2017-12-06 06:27:25

これはコメントではありません – Liam

これはコメントでなければなりません –

はい、私は50以上の評判を持っていないのでコメントできませんでした。 –

CSSのページの右側にdivを保持する方法

答えて

関連する問題