Question

我想在（x）列中放置新闻帖子，具体取决于窗口大小。我坚持一些似乎很容易的东西，但我无法修复它。我想将.box-category元素浮动到图像上。为了实现这一点，我想将.box-image位置设置为relative，将box-category设置为absolute。当我将.box-image位置设置为relative时，图像将从第二列和第三列中消失。当我只将.box-category设置为绝对时，它只在第一列中显示。我做错了什么，我该如何解决？

有一些关于结果的屏幕截图：

只有盒类位置：绝对; https://drive.google.com/file/d/0B66mAnIw9SMqMmlvSlNEZ2NYLVE/view （类别名称在同一列中）

boc-category：绝对，box-image：relative; https://drive.google.com/file/d/0B66mAnIw9SMqa3dBZWpuOFpBekU/view （类别名称在正确的位置，但没有文本，图像不会在第2和第3个框中呈现）

代码：

{extends file="Global/index.tpl"}
{block name=index}
<style>
//COLUMN COUNT  HANDLING
.contentColumns { /* Masonry container */
    -moz-column-count: 3 !important;
    -webkit-column-count: 3 !important;
    column-count: 3 !important;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}
@media only screen and (min-width: 0px) and (max-width: 992px){
    .contentColumns {
        -moz-column-count: 2 !important;
        -webkit-column-count: 2 !important;
        column-count: 2 !important;
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px){
    .contentColumns {
        -moz-column-count: 1 !important;
        -webkit-column-count: 1 !important;
        column-count: 1 !important;
    }
}

//ITEMS TO PLACE INSIDE COLUMNS

.box {
    width: 100%;
    display: inline-block;
    margin-bottom: 10px;
    background-color: #ffffff;
    border-radius: 3px;
    overflow: hidden;
    -webkit-box-shadow: 0px 1px 1px 0px rgba(50, 50, 50, 0.12);
    -moz-box-shadow:    0px 1px 1px 0px rgba(50, 50, 50, 0.12);
    box-shadow:         0px 1px 1px 0px rgba(50, 50, 50, 0.12);
    padding-bottom: 15px;
 }

.box-more {

   padding-top: 5px;
   padding-bottom: 5px;
   padding-left: 7px;
   padding-right: 7px;

   border-radius: 3px;
   text-decoration: none;
   text-transform: uppercase;

}

.box-category {

   padding-top: 5px;
   padding-bottom: 5px;
   padding-left: 7px;
   padding-right: 7px;
   text-transform: uppercase;

}

.box-content {
    text-align: justify;
    padding-left: 15px;
    padding-right: 15px;
}

.box-footer {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 5px;
    color: #BBB;
}

.box-title {
    padding-left: 15px;
    padding-right: 15px;
    height: 40px !important; 
}
.box-title h4 {
    line-height: 40px !important;
    font-weight: bold;
}

.box-image{
    width: 100%;
    position: relative;
    overflow: hidden;
}

</style>

<div class="container">
    <div class="contentColumns">
        {foreach $items as $news_item}
            <div class="box">  

                <div class="box-image">
                    <span style="position: absolute;" class="box-category">category name</span>
                    <img style="width: 100%;" src="{$base}{$news_item.news_image}">
                </div>

                <div class="box-title">
                    <h4>{$news_item.news_title}</h4>
                </div>

                <div class="box-content">
                    <p>{$news_item.news_quote}</p>
                </div>
                <hr>
                <div class="box-footer">

                    <span class="pull-left">
                         {$news_item.date_posted|date_format}
                    </span>

                    <span class="pull-right">
                        <a href="" style="color: #00a8ff; border: 1px solid #ddd;" class="box-more">Read More</a>
                    </span>
                    <div class="clearfix"></div>

                </div>

            </div>
        {foreachelse}
            There are no news posts.
        {/foreach}
    </div>
</div>

{/block}

内联块内的相对和绝对定位

0 个答案: