もし子供たちが親に合っていない場合は、センターの子供

Question

私の問題は、親が幅を持っていて、画面がすべてにフィットしない場合です。子供たち（左に浮かぶ）は、彼らは親の中に中心が置かれるように他のものの下に行くときにそれらを。

ここに私のコードです。私はinline-blockを試してみましたが、それが助けにはならなかったので、

.mainpage-articles { 
    float:left; 
    width: 60%; 
} 

.mainpage-article { 
    width: calc(800px + 8%); 
    margin-left: auto; 
    margin-right: auto; 

} 

.mainpage-article .thumbnail { 
    position: relative; 
    height: 200px; 
    width: 400px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 2%; 
    float: left; 
} 

.mainpage-article .thumbnail img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

.mainpage-article .article { 
    height: 200px; 
    width: 400px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 2%; 
    float: left; 
} 

.mainpage-article .article h1 { 
    height: 60px; 
} 

.mainpage-article .article p { 
    height: 120px; 
} 

Answer 1

にあなたはおそらく、ユーザーの画面に対応するため、メディアクエリを学びたいしています。私は正しい？それはそれをだ場合は、ここを見て：それはdoesnのその上で、

@media (max-width: 1500px) { 
    .mainpage-articles { 
    text-align: center; 
    } 
} 

このコード整列テキスト物事をセンターに、ユーザウインドウのが最大1500pxにあるとき：https://codepen.io/giovannipds/pen/BwqyLW

これは、あなたが学びたいものです't。メディアクエリを適用する方法はたくさんあります。私はそれを少し良く学ぶためにwatch thisにお勧めします。上記の例の

完全なコードは：

<style> 
    .mainpage-articles { 
    background-color: #eee; 
    float: left; 
    width: 60%; 
    } 
    .mainpage-article { 
    background-color: cyan; 
    width: calc(800px + 8%); 
    margin-left: auto; 
    margin-right: auto; 
    } 
    .mainpage-article .thumbnail { 
    background-color: yellow; 
    position: relative; 
    height: 200px; 
    width: 400px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 2%; 
    float: left; 
    } 
    .mainpage-article .thumbnail img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    } 
    .mainpage-article .article { 
    background-color: #ccc; 
    height: 200px; 
    width: 400px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 2%; 
    float: left; 
    } 
    .mainpage-article .article h1 { 
    height: 60px; 
    } 
    .mainpage-article .article p { 
    height: 120px; 
    } 
    @media (max-width: 1500px) { 
    .mainpage-articles { 
     text-align: center; 
    } 
    } 
</style> 
<div class="mainpage-articles"> 
    <div class="mainpage-article"> 
    <div class="thumbnail"> 
     <img src="//lorempixel.com/400/200" alt=""> 
    </div> 
    <div class="article"> 
     <h1>Lorem ipsum</h1> 
     <p>Dolor sit amet.</p> 
    </div> 
    </div> 
</div> 

すぎBootstrap 4で例hereあります：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
<style> 
    .parent { 
    background-color: yellow; 
    } 
    .smth-else { 
    background-color: cyan; 
    } 
    .children { 
    margin: 75px !important; 
    } 
    .children [class^=col-] { 
    border: 1px solid red; 
    } 
</style> 
<div class="container-fluid"> 
    <div class="row"> 
    <div class="parent col"> 
     <div class="children row"> 
     <div class="col-lg-6"> 
      Children col 1 
     </div> 
     <div class="col-lg-6"> 
      Children col 2 
     </div> 
     </div> 
    </div> 
    <div class="smth-else col"> 
     Smth else 
    </div> 
    </div> 
</div> 

あなたのコードはとてもきれいではありません、あなたはより良いメディアクエリを使用するように適応させる必要があります。