Question

使用FlexBox和Sass，我尝试创建堆叠的垂直条，如下图所示。我期望垂直文本占据一栏的行，从而产生堆叠效果。但是，发生的是文本重叠。

html标记如下：

<div class="container__row">
  <div class="container__col-sm-12 container__col-md-6 container__col-md-6">
      <h1>Another section</h1>
  </div>
  <div class="container__col-sm-12 container__col-md-6 container__col-md-6">
      <div class=container__row>
        <div class="container__col-sm-12 container__col-md-12 container__col-md-12 skills-bar">
          Front-End Technologies
        </div>
      </div>
      <div class=container__row>
        <div class="container__col-sm-12 container__col-md-12 container__col-md-12 skills-bar">
          Front-End Technologies
        </div>
      </div>
      <div class=container__row>
        <div class="container__col-sm-12 container__col-md-12 container__col-md-12 skills-bar">
          Design
        </div>
      </div>
      <div class=container__row>
        <div class="container__col-sm-12 container__col-md-12 container__col-md-12 skills-bar">
          GIS
        </div>
      </div>
    </div>

<div class="container__row">

这是构成css样式的Sass .scss代码：

//site container with set max width
$grid__bp-md: 768;
$grid__bp-lg: 992;
$grid__cols: 12;
//sass map to define breakpoints
$map-grid-props: ('-sm':0, '-md': $grid__bp-md, '-lg' : $grid__bp-lg);
//mixin to dynamically create media query  for each breakpoint
@mixin create-mq($breakpoint) {
  @if($breakpoint == 0) {
    @content;
  } @else {
    @media screen and (min-width: $breakpoint *1px) {
      @content;
    }
  }
}
@mixin create-col-classes($modifier, $grid__cols, $breakpoint) {
  @include create-mq($breakpoint) {
    //class to set up columns for all screen sizes - mobile first
    @for $i from 1 through $grid__cols {
      &__col#{$modifier}-#{$i} {
        flex-basis: (100 / ($grid__cols / $i)) * 1%;
      }
    }
  }
}

.container {
  max-width: $grid__bp-md * 1px;
  margin: 0 auto;
  //attribute to override max width
  &--fluid {
    margin: 0;
    max-width: 100%;
  }
  //attribute to position row's child elements. remove overflow with wrap and 100% width for nesting
  &__row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  @each $modifier, $breakpoint in $map-grid-props {
    @include create-col-classes($modifier, $grid__cols, $breakpoint);
  }
}

  p {
    font-size: .85em;
    color: #aaa;
  }
}

.skills-bar {
  transform: rotate(90deg);
  transform-origin: left top 0;
  float: left;
}

发生这种奇怪的重叠。谁能提出建议，为什么垂直文本不行？

Answer 1

如果您在检查器中查看，您会发现容器的原始高度不受转换的影响，这就是这种情况发生的原因。我想不出一种方法来解决这个问题，而不用js进行转换后再测量新的高度。

我不确定您需要支持哪些浏览器，但是text-orientation / writing-mode会在没有js的情况下满足您的需求。

.skills-bar { writing-mode: sideways-lr; // only supported in FF, use 'vertical-lr' for more support text-orientation: upright; float: left; }

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation

Answer 2

为了测量css转换后的div，我使用了getBoundingClientRect（）。

通过几行jquery，我得到了所需的内容：

@app.route('/account', methods = ['GET', 'POST'])
@login_required
def account():

form = UpdateAccountForm()

if form.validate_on_submit():
    current_user.username = form.username.data
    db.session.commit()
    flash(f"Updated Account information, welcome {form.username.data}, {current_user.username},",  'success')
    return redirect(url_for('account'))
elif request.method == 'GET':
    form.username.data = current_user.username


return render_template('account.html', title='Account', form=form)

class UpdateAccountForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired(), Length(min=4, max=20)])
    submit = SubmitField('Update')

def validate_username(self, username):
    if username.data != current_user.username:
        user = db.session.query(models.User).filter_by(username=username.data).first()
        if user:
            raise ValidationError('That username is taken. Please choose another.')
        return user

使用Sass CSS和FlexBox垂直堆叠转换后的文本

2 个答案: