html - Flexbox 边距顶部 : auto not pushing item to bottom-6ren

html - Flexbox 边距顶部 : auto not pushing item to bottom

转载作者：搜寻专家更新时间：2023-10-31 23:19:53

我希望 UL 将每个元素推到容器底部。我为该元素设置了 margin-top:auto 但它不起作用。我有另一个有效的演示，但这是我需要使用的演示。有什么帮助吗？

.featured-products-carousel {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1150px;
  width: 80%;
}
.featured-products-carousel .item {
  background-color: white;
  padding: 20px;
  align-items: stretch;
  display: flex;
  flex-direction: column;
  margin: 10px;
  padding: 0;
  flex: 1 1 auto;
  flex-wrap: wrap;
}
.featured-products-carousel .item h2 {
  text-align: center;
  padding: 8px 5px;
}
.featured-products-carousel .item .featured-product-description {
  margin-bottom: auto;
}
.featured-products-carousel .item .featured-products-links {
  margin-top: auto;
}
.featured-products-carousel .item ul {
  margin-top: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="featured-products-carousel" role="listbox">
<div class="item  active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2">
    <span class="h2-span">
        <h2 class="h2-height"> [product-id] &nbsp; </h2>
    </span>
        
        
        <div class="product-image">
            <a href="/products/[[product-id]]">
                    <img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center">
                
        </a>
        </div>
        <p class="featured-product-description"> Description Text. Lots and lots of great content about a particular part. Description Text. Lots and lots of great content about a particular part.</p>
        
            <ul class="list-unstyled">
                <li>
                    <a href="/products/[product-id]">
                    More About [product-id]&nbsp;»
                    </a>
                </li>
                <li>
                    <a href="[product-id].pdf">Datasheet</a>
                </li>
            </ul>
       
</div>
<div class="item  active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2">
    <span class="h2-span">
        <h2 class="h2-height"> [product-id] &nbsp; </h2>
    </span>
    
        
        <div class="product-image">
            <a href="/products/[[product-id]]">
                    <img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center">
                
        </a>
        </div>
        <p class="featured-product-description"> Description Text. Lots and lots of great content about a particular part. </p>
        
            <ul class="list-unstyled">
                <li>
                    <a href="/products/[product-id]">
                    More About [product-id]&nbsp;»
                    </a>
                </li>
                <li>
                    <a href="[product-id].pdf">Datasheet</a>
                </li>
            </ul>
        
    
</div>
<div class="item  active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2">
    <span class="h2-span">
        <h2 class="h2-height"> [product-id] &nbsp; </h2>
    </span>
    
        
        <div class="product-image">
            <a href="/products/[[product-id]]">
                    <img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center">
                
        </a>
        </div>
        <p class="featured-product-description"> Description Text. Lots and lots of great content about a particular part. Description Text. Lots and lots of great content about a particular part.</p>
        
            <ul class="list-unstyled">
                <li>
                    <a href="/products/[product-id]">
                    More About [product-id]&nbsp;»
                    </a>
                </li>
                <li>
                    <a href="[product-id].pdf">Datasheet</a>
                </li>
            </ul>
   
</div>
<div class="item  active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2">
    <span class="h2-span">
        <h2 class="h2-height"> [product-id] &nbsp; </h2>
    </span>
    
        
        <div class="product-image">
            <a href="/products/[[product-id]]">
                    <img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center">
                
        </a>
        </div>
        <p class="featured-product-description"> Description Text. Lots and lots of great content about a particular part. </p>
        
            <ul class="list-unstyled">
                <li>
                    <a href="/products/[product-id]">
                    More About [product-id]&nbsp;»
                    </a>
                </li>
                <li>
                    <a href="[product-id].pdf">Datasheet</a>
                </li>
            </ul>
        
    
</div>
</div>

最佳答案

父元素不是 display: flex;，即使你已经指定了它，因为还有另一个规则用 display: block!important; 覆盖它。

display: block!important 来自第 6636 行的 bootstrap.css 和第 6554 行的另一个。

.featured-products-carousel {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1150px;
  width: 80%;
}
.featured-products-carousel .item {
  background-color: white;
  padding: 20px;
  align-items: stretch;
  display: flex!important;
  flex-direction: column;
  margin: 10px;
  padding: 0;
  flex: 1 1 auto;
  flex-wrap: wrap;
}
.featured-products-carousel .item h2 {
  text-align: center;
  padding: 8px 5px;
}
.featured-products-carousel .item .featured-product-description {
  margin-bottom: auto;
}
.featured-products-carousel .item .featured-products-links {
  margin-top: auto;
}
.featured-products-carousel .item ul {
  margin-top: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="featured-products-carousel" role="listbox">
<div class="item  active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2">
    <span class="h2-span">
        <h2 class="h2-height"> [product-id] &nbsp; </h2>
    </span>
        
        
        <div class="product-image">
            <a href="/products/[[product-id]]">
                    <img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center">
                
        </a>
        </div>
        <p class="featured-product-description"> Description Text. Lots and lots of great content about a particular part. Description Text. Lots and lots of great content about a particular part.</p>
        
            <ul class="list-unstyled">
                <li>
                    <a href="/products/[product-id]">
                    More About [product-id]&nbsp;»
                    </a>
                </li>
                <li>
                    <a href="[product-id].pdf">Datasheet</a>
                </li>
            </ul>
       
</div>
<div class="item  active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2">
    <span class="h2-span">
        <h2 class="h2-height"> [product-id] &nbsp; </h2>
    </span>
    
        
        <div class="product-image">
            <a href="/products/[[product-id]]">
                    <img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center">
                
        </a>
        </div>
        <p class="featured-product-description"> Description Text. Lots and lots of great content about a particular part. </p>
        
            <ul class="list-unstyled">
                <li>
                    <a href="/products/[product-id]">
                    More About [product-id]&nbsp;»
                    </a>
                </li>
                <li>
                    <a href="[product-id].pdf">Datasheet</a>
                </li>
            </ul>
        
    
</div>
<div class="item  active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2">
    <span class="h2-span">
        <h2 class="h2-height"> [product-id] &nbsp; </h2>
    </span>
    
        
        <div class="product-image">
            <a href="/products/[[product-id]]">
                    <img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center">
                
        </a>
        </div>
        <p class="featured-product-description"> Description Text. Lots and lots of great content about a particular part. Description Text. Lots and lots of great content about a particular part.</p>
        
            <ul class="list-unstyled">
                <li>
                    <a href="/products/[product-id]">
                    More About [product-id]&nbsp;»
                    </a>
                </li>
                <li>
                    <a href="[product-id].pdf">Datasheet</a>
                </li>
            </ul>
   
</div>
<div class="item  active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2">
    <span class="h2-span">
        <h2 class="h2-height"> [product-id] &nbsp; </h2>
    </span>
    
        
        <div class="product-image">
            <a href="/products/[[product-id]]">
                    <img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center">
                
        </a>
        </div>
        <p class="featured-product-description"> Description Text. Lots and lots of great content about a particular part. </p>
        
            <ul class="list-unstyled">
                <li>
                    <a href="/products/[product-id]">
                    More About [product-id]&nbsp;»
                    </a>
                </li>
                <li>
                    <a href="[product-id].pdf">Datasheet</a>
                </li>
            </ul>
        
    
</div>
</div>

关于html - Flexbox 边距顶部 : auto not pushing item to bottom，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43879601/

文章推荐： javascript - 获取类内的 tagName 元素

文章推荐： php - 为什么搜索查询在 PHRETS 中没有显示任何结果？

文章推荐： html - 更改不同行之间的堆栈顺序 flexbox

文章推荐： PHP:使用 GD 库时图像上出现黑条

javascript - React Native 的 FlatList prop renderItem 需要额外的 "item"(item) => {item.item.name}?
这里我试图在 FlatList 中显示一个名为“posts”的数组。 render() { console.log(this.props.posts); return (
vue.js - V-代表 ="item in items"。在计算属性中使用 "item"
这是我的代码: {{day(list)}} {{list.weather[0].description}}
mahout - Apache Mahout : can we combine User-Item and Item-Item?
我是 Mahout 的新手，并且仍在使用它。我的问题是，将 Item-Item 和 User-Item 结合起来是否合适？我的用例是，一个社交网络应用会尝试根据用户历史数据(优先级较高)为当前用户
android - 测试房间数据库，可迭代包含 "Item"但 !item 0 是 "Item"
下午好，我按数据库搜索以测试特定类测试，当我放置一个新项目时，如果列表包含该项目。 @Test public void insertAndDeleteTask() throws Interrupte
html - ionic ion-item item-right 和 item-centered
我有一个关于 ionic 框架的问题，我希望有人能帮助我...我有一个带有“ion-item-right”的 ionic 列表。这一切都可以，按钮在右边。现在我需要其他三个居中的图标，这样我就有了:文
c# - if(items != null) 在 foreach(T item in items) 之前是否多余？
我经常遇到类似下面的代码: if ( items != null) { foreach(T item in items) { //... } } 基本上，if 条件确
javascript - localStorage.getItem ('item' ) 是否优于 localStorage.item 或 localStorage ['item' ]？
我最近问了a question about LocalStorage .使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
javascript - localStorage.getItem ('item' ) 是否优于 localStorage.item 或 localStorage ['item' ]？
我最近问了a question about LocalStorage .使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
java - 奇怪的 Java 编译器错误 (Error :(65, 23) java : incompatible types: Bag. Node 无法转换为 Bag.Node )
这个问题已经有答案了: Type mismatch: cannot convert from Item to Item (1 个回答) 已关闭 7 年前。我很困惑。我无法将外部类的实例变量 Node
reactjs - Mui Grid Item Fixed Width Item Beside Fill Width Item
我目前正在使用 MUI Grid(但我对替代解决方案持开放态度)并且我想要并排放置两个组件:最右边的组件占 400px宽度和左侧组件占据其余部分。 || || || 当页面宽度缩小时: | | ||
javascript - localStorage.getItem ('item' ) 比 localStorage.item 或 localStorage ['item' ] 更好吗？
我最近问过a question about LocalStorage 。使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
list - JPA JPQL : select items when attribute of item (list/set) contains another item
public class Document extends Model { ... @ManyToMany public Set accessors; ... } 我想选择访问者包含某个用户的所有文档
java - 具有层次结构的页面的页面对象的体系结构/设计 : menu-items/menu-sub-items/menu-sub-items-tabs
我正在使用 selenium webdriver 为单页 Web 应用程序开发一个 Java 框架，使用以下模式:PageObject、SlowLoadableComponent(责任链)、PageF
c - BOOLEAN allocate_items(struct item * items, size_t howmany) 函数用于分配 struct item 数组
最近在学习C，在网上发现了一个问题。问题是: What is the problem with this function in terms of memory allocation? What is
javascript - 我必须在 FlatList 的 renderItem 中使用 item.item.property 而不是 item.property
我有这个代码 ( -1 ? true : false} /> {genre.item.name}
asp.net - (e.Item.ItemType==ListItemType.Item | e.Item.ItemType==ListItemType.AlternatingItem) 的快捷方式
在ASP.Net中使用DataGrid时真的没有快捷方法吗 (e.Item.ItemType==ListItemType.Item || e.Item.ItemType==ListItemType.A
java - CQ5 无法更新过时的项目 : item. save() javax.jcr.InvalidItemStateException : Unable to update a stale item: item. save()
我正在使用工作流程根据数据和一组要求将大量 pdf 从一个位置复制到其他大坝位置。我正在使用以下代码 Assets damAsset = manager.createAsset(path, is, m
powershell - 删除项目错误 : Cannot remove item [item path & name]: Access to the path '[item path & name]' is denied
我是 PowerShell 的新手。我正在尝试自动将 dll 组件从源服务器上的文件夹部署到目标服务器上的多个文件夹。这看起来应该很简单:将组件从源服务器上的源(部署)文件夹复制到目标服务器上的文件
python - 断言错误 : Number of manager items must equal union of block items # manager items: 6004, # tot_items: 6005
我的代码: for column_name, column_data in summary_words.iteritems(): if column_name != "summary" and
python - 断言错误 : Number of manager items must equal union of block items # manager items: 6004, # tot_items: 6005
我的代码: for column_name, column_data in summary_words.iteritems(): if column_name != "summary" and

搜寻专家

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - Flexbox 边距顶部 : auto not pushing item to bottom