右對齊響應CSS網格佈局

-1

我有一個HTML佈局我需要制定和我想不出任何好的方式來做到這一點...右對齊響應CSS網格佈局

我怎樣才能讓這個佈局？

它基本上是一個正常的響應中心列布局，其中列是最大寬度與一些填充 - 我沒有問題，該部分。但是，我遇到的問題是還有一個右對齊列，但左邊與中心列的左邊對齊。

我怎麼能用CSS實現這一點，理想情況下不需要使用JavaScript來計算寬度等？

（是的，這已經在最近的2個版本的瀏覽器的工作，所以CSS網格佈局等，可能不會是不幸的是有用的）

像這樣：

有人要求提供代碼，所以這裏有一些僞代碼，但是我正在尋求使用HTML和CSS的方法，所以這個（非常基本的）代碼可能不是正確的方法。不過，這是一個非常基本的列布局，其中包含（非工作）右對齊列。

我也許還應該補充一點，我對HTML和CSS有很好的理解，但是不能想辦法做到這種佈局。「使用自舉」可能不是一個有用的答案不幸的是，除非你能證明它如何能明確做到這一點（然後我就複製的造型和自己動手）

<style> 
.centre-aligned-column { 
    max-width: 960px; 
    padding: 0 30px; 
    margin: auto; 
} 
.right-aligned-column { 
    /* how? */ 
} 
</style> 
<section> 
    <div class="right-aligned-column"> 
     RIGHT ALIGNED COLUMN CONTENT 
    </div> 
</section> 
<section> 
    <div class="centre-aligned-column"> 
     CENTRE ALIGNED COLUMN CONTENT 
    </div> 
</section>

來源

2017-08-22 Ned Martin

Your tag：'grid-layout' already answers your question。有很多方法 - 但這取決於您的應用程序/網站首先是佈置「小屏幕」還是其他許多方面。 https://www.youtube.com/watch?v=7kVeCqQCxlk（ps：它不會「改變一切」，它只是改變了一小部分東西） – sheriffderek

如果你需要幫助，你將不得不寫一些代碼。：） – sheriffderek

@sheriffderek這是我的理解，在這種情況下，網格佈局沒有得到足夠的生產支持，但我會考慮是否可以放棄使用它。不幸的是，由於缺乏瀏覽器支持，我還沒有很多的經驗。我沒有看到如何編寫任何代碼可以幫助您回答，但我現在已經放了一些代碼。 –

-1

您可以使用引導電網系統。它已經響應，你只需要調用特定寬度的類。請參閱此參考鏈接https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp。

來源

2017-08-22 01:19:16 bellabelle

引導程序如何執行右對齊列，其左邊緣與中心對齊的最大寬度列對齊，並作出響應？我不相信它可以。 –

bootstrap在每一列中計算相同的寬度百分比，那麼'row'類或父類有一個空白左邊距和空白右邊負值，所以'row'的左邊與'row'的左邊和右邊對齊對，我用這個網格類，但其他人是手動編碼 – bellabelle

像網格類的每一列都有一個填充，但行父div元素左和右有一個負值 – bellabelle

右對齊響應CSS網格佈局

回答

相關問題