右对齐响应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网格布局

回答

相关问题