小编Sup*_*ony的帖子

将div元素与容器底部对齐

我试图在容器内底部对齐三个div中的一个,但我遇到了一些问题.

正如您将看到的,如果我尝试在bottom-aligneddiv 上使用绝对定位,则高度成为问题.

我可以设置一个特定的高度,但cta-itemdiv中的内容可以从非常小到非常大.

我正在尝试为所有用例创建一个解决方案.

我知道我可以使用jQuery获取最大cta-itemdiv 的高度并相应地进行调整,但我试图尽可能避免使用jQuery/JS.

我在这里用我现在拥有的东西创造了一个小提琴.

先感谢您!

.dynamic-cta-ctr {
  display: flex;
}
.dynamic-cta-ctr .cta-item {
  flex: 1;
  text-align: center;
  padding: 0 30px;
  position: relative;
  border-right: 1px solid #555;
}
.dynamic-cta-ctr .cta-item:last-child {
  border-right: none;
}
.dynamic-cta-ctr .cta-item .bottom-aligned {
  /* position: absolute;
  bottom: 0; */
}
Run Code Online (Sandbox Code Playgroud)
<div class="dynamic-cta-ctr">
  <div class="cta-item">
    <div class="heading-text"><h3>Some content</h3></div>
    <div class="cta-field-content">Some content that sort of hangs around</div>
    <div class="bottom-aligned"><h5>Bottom aligned content</h5></div>
  </div>
  <div class="cta-item">
    <div class="heading-text"><h3>You …
Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox

2
推荐指数
1
解决办法
3843
查看次数

切换语句和jQuery hasClass函数

我正在尝试使用switch语句来检查当前页面是否具有特定的正文类。这是我正在寻找的一种:

var bodyClass = $('body').hasClass('className')

 switch(bodyClass) {
    case 'homepage':
        // console.log("This is the homepage");
        break;
    case 'residential-page':
        // console.log("This is the residential page");
        break;
     default:
     // console.log("default code block ran");
 }
Run Code Online (Sandbox Code Playgroud)

我确实知道jQuery hasClass函数返回true为false,并且像$('body')。hasClass('someClassName')一样使用,这将返回true或false。同样,对于给定的页面,我的身体通常具有大约7-10个不同的类名。

javascript jquery switch-statement

1
推荐指数
1
解决办法
3573
查看次数

标签 统计

css ×1

css3 ×1

flexbox ×1

html ×1

javascript ×1

jquery ×1

switch-statement ×1