gpt4 book ai didi

sass - 波旁威士忌 整洁 : How to expand column to match outer-container?

转载 作者:行者123 更新时间:2023-12-01 06:52:15 28 4
gpt4 key购买 nike

我正在测试 Bourbon Neat,我在一个外容器中有两列,我希望这些列的高度相等(与最高的列一样高)。在短列上使用 @include fill-parent 不起作用,它只会使它与外部容器一样宽。我可以用 javascript 来做,但 Neat 不能处理这个吗?
这是我的 html:

<section class="blog">

<article>
<h1>How to set up Bourbon Neat</h1>
<h2>Installing and using Bourbon</h2>
<p>Install bourbon by going to your users directory in git bash, and typing: gem install bourbon</p>
<p>Then change directory to your style folder and type in git bash: bourbon install</p>
<p>Then, import the mixins at the top of your stylesheet(s): @import 'bourbon/bourbon'</p>
<h2>Installing and using Neat</h2>
<p>Install neat by going to your users directory in git bash, and typing: gem install neat</p>
<p>Then change directory to your style folder and type in git bash: install neat</p>
<p>Then, import the mixins at the top of your stylesheet(s): @import 'bourbon/bourbon'</p>
</article>

<aside>
<!--<img src="style/images/cupman.gif" alt="It's bidness time">-->
<p>It's bidness time</p>
</aside>

这是我的 SASS:`
$visual_grid: true
$visual-grid-color: blue
$visual-grid-index: front
$visual-grid-opacity: 0.1

@import 'bourbon/bourbon'
@import 'neat/neat'

@import 'variables'



///////////////////////////
html
@include linear-gradient(black, gray)
height: 100%

body
background-color: $baseColor
font-family: $type


body *
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
box-sizing: border-box


//////////////////////////////


.blog
@include outer-container
aside
@include span-columns(4)
background: $thirdColor
//height: 100%
//@include fill-parent()
article
@include span-columns(8)
background-color: $fourthColor
padding: 5px
margin-top: 40px
background-color: $secondColor
`
And here's a picture illustrating the problem.
谢谢阅读。
编辑:现在,我只是使用 jQuery 来手动均衡列大小,但请告诉我是否有更简洁的方法(哈哈)来解决这个问题。

最佳答案

相等列高的一种解决方案是使所有父级都设置为 height:100%。

使用您的示例:

html, body 
height: 100%

.blog
@include outer-container
height: 100%
aside
@include span-columns(4)
background: $thirdColor
height: 100%
article
@include span-columns(8)
background-color: $fourthColor
padding: 5px
height:100%

这应该工作

关于sass - 波旁威士忌 整洁 : How to expand column to match outer-container?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23621600/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com