中心的孩子，如果他們不適合父母

-1

所以我的問題是，父母有一定的寬度，如果屏幕不能適應一切兒童（左浮動）下一個（看起來很棒），所以我想當他們在另一個下面時，他們會以父母爲中心。中心的孩子，如果他們不適合父母

這是我的代碼。我試圖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; 
}

來源

2017-10-14 NFSpeedy

你應該可以在嵌套元素上使用'display：inline-block'而不是'float'來做到這一點，然後將'text-align：center'聲明爲父元素。 – UncaughtTypeError

如果您嘗試過某些功能，請分享。請在嘗試解決問題之前先解決 –

我試過了我不想共享代碼，因爲它很多，但是我編輯並共享了它。（不完整的tho ...不讓我分享完整的代碼）。 – NFSpeedy

你可能想了解媒體查詢，向用戶的屏幕響應。我對嗎？如果它是，看看這裏：https://codepen.io/giovannipds/pen/BwqyLW

這就是你要學什麼：

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

此代碼對齊文本的東西中心，當用戶窗口的是在最大1500px，高於它不「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>

這裏有一個例子here與Bootstrap 4太：

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

您的代碼也不是那麼漂亮，你要適應他們使用媒體查詢更好。

來源

2017-10-14 19:29:16 giovannipds

是的！這是主意，但我不允許使用Bootstrap或任何其他外部庫。 – NFSpeedy

中心的孩子，如果他們不適合父母

回答

相關問題