メインdivコンテナの中にフォーム要求divを配置する方法

Question

私は、左側に検索フォームを、右側に別のdivコンテナを持っています。右のコンテナには、別のdivにある値をフォームに送信します（結果divとしましょう）。

これはCSSである：ここでは

.main-container{ 
    margin: 0 auto; 
    overflow: auto;  
    width: 90vw; 
    height: 85vh; 
    background-color: #ff9933; 
} 


/*form inside main-container on the left*/ 

.form{ 
    float: left; 
    width: 15vw; 
    margin-top: 2vh; 
    margin-left: 2vh; 
    position: absolute; 
} 


/* results-container inside main-container on the right*/ 

.results-container{ 
    display: inline-block;  
    width: 70vw; 
    float: right; 
} 

/* found results div inside it's container */ 

.result{ 
    display: inline-block; 
    width: 284px; 
    height: 315px; 
    position: relative; 
    margin: 0 auto; 
} 

はあなたが理解するためにいくつかの画像は、あなたの助けに感謝

私は結果-コンテナ内の結果を中央にすることはできませんよです。私が除けばdisplay: inline-block;は全てが中央揃えされていますが、整列していません（行ごとに1つの結果）。私がそれをこのようにすると、すべての結果が、望ましい動作ではない左側に固執します。

私はPHP jQueryなどに何か公開しています。私は$sqlの結果を数えて結果に応じてポジショニングを変更しますが、それは実用的ではありません

Answer 1

これは動作するかどうかわかりませんが、動作するJSfiddleやテストするものはありませんが、あなたの.results-containerのCSSブロックにtext-align: center;の後に続きます。

.results-container{ 
    display: inline-block;  
    width: 70vw; 
    float: right; 
    text-align: center; 
} 

これが機能するかどうかを教えてください。

Answer 2

優れた柔軟なアプローチのために、私はフレキシボックス使用してお勧めします：（高さ/幅などは一例のためにある）一般に

アプローチは：結果幅の周り

.container { 
    background: lightblue; 
    height: 600px; 
    width: 500px; 
    display: flex; 
    flex-direction: row; 
    align-items: flex-start; 
    flex-wrap: wrap; 
    justify-content: center; 
} 

.result { 
    margin: 10px; 
    height: 100px; 
    width: 100px; 
    background: red; 
} 

メス中央に置かれたままでそれがどのように変化するかを見てください。

Fiddle

Answer 3

flexingに浮動から移動します。

結果、コンテナの使用

display:flex; 
flex-wrap: wrap; 
justify-content: center; 

を開始します。