Question

我受到了网站滑块的启发，但由于我不需要滑块，我试图将其创建为静态。但是，我正在努力解决一些问题。首先，当你将文本隐藏在大栏上时？怎么会这样呢？其次，我努力使其反应迅速。当你使浏览器变小并使高度与整个宽度成比例时，我希望列在彼此之下吗？我怎样才能做到这一点？

<head>

<style>
.wrapper {
    width: 100%;
    height: 400px;

}

.item {
    float: left;

}

.double-size {
    width: 66.6666%;
    height: auto;




}

.normal-size {
    float: left;
    width: 33.3333%;
    height: auto;
    display: inline-block;



}

.double-size .column-big {
    box-sizing:border-box; 
   width: 100%;
    height: 100%;
    padding: 0px 2px 0px 0px;





}

.normal-size .column-small-1 {
    box-sizing:border-box;
    width: 100%;
    height: 50%;  
    padding: 0px 0px 2px 2px;





}

.normal-size .column-small-2 {
    box-sizing:border-box;
    width: 100%;
    height: 50%;

    padding: 2px 0px 0px 2px;

}

.column-content {

    height: 100%;
   position: relative;
   overflow: hidden;


}



.column-content .meta-info-doub {
box-sizing:border-box;
position: absolute;
height: auto;
width: 100%;
bottom:0;
right: 0;
padding: 40px;
}

.column-content .meta-info-norm {
box-sizing:border-box;
position: absolute;
height: auto;
width: 100%;
bottom:0;
right: 0;
padding: 20px;
}



 .title-double {

    font-family: 'Open Sans', sans-serif;
font-size: 20px;
line-height: 1.65;
background: #161616;
background: rgba(22, 22, 22, 0.5);
color: #fff;
display: inline;
padding: 4px 0;
margin: 0;
-webkit-box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
text-transform: uppercase;


}

 .title-normal {
    font-family: 'Open Sans', sans-serif;
font-size: 17px;
line-height: 1.65;
background: #161616;
background: rgba(22, 22, 22, 0.5);
color: #fff;
display: inline;
padding: 4px 0;
margin: 0;
-webkit-box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
text-transform: uppercase;


}

 .date-double {
    font-family: 'Open Sans', sans-serif;
    display: inline;
    color: #fff;
    font-size: 11px;
    text-shadow: 0 1px 0 #222;
    text-transform: uppercase;
    margin-bottom: 11px;
    display: block;
}


 .date-normal {
    font-family: 'Open Sans', sans-serif;
    display: inline;
    color: #fff;
    font-size: 11px;
    text-shadow: 0 1px 0 #222;
    text-transform: uppercase;
    margin-bottom: 11px;
    display: block;
}



.column-content .content-image{

    height: 100%; 
    width: 100%; 
    background-size: 100%; 
    display:block; 
     -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;

}

.column-content .content-image:hover {
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);  

}

@media all and (max-width: 768px) {
    .normal-size {
    float: none;
    width: 100%;
    margin-top: 3px;

    }
    .double-size {
    float: none;
    width: 100%;

    }
}

</style>
</head>


<body>
<div class="wrapper">
    <div class="item double-size">
        <div class="column-big">
            <div class="column-content">

                    <div class="meta-info-doub">
                        <h3 class="date-double">23. Oktober 2015</h3>
                        <h3 class="title-double">Post 1</h3>



                    </div>

                <span href="#" id="img-zoom" class="content-image" style="background-image:url(http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg)"></span>
            </div>
        </div>
    </div>
    <div class="item normal-size">
        <div class="column-small-1">
            <div class="column-content">
                <a href="#" class="content-image" style="background-image:url(http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg )"></a>

                    <div class="meta-info-norm">
                        <h3 class="date-double">23. Oktober 2015</h3>
                        <div class="info-title"><h3 class="title-normal">Post 2</h3></div>



                    </div>




            </div>
        </div>
        <div class="column-small-2">
            <div class="column-content">
                <a href="#" class="content-image" style="background-image:url(http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg)"></a>

                    <div class="meta-info-norm">
                        <h3 class="date-double">23. Oktober 2015</h3>
                        <div class="info-title"><h3 class="title-normal">Post 3</h3></div>



                    </div>


            </div>
        </div>
    </div>



</div>




</body>

Answer 1

据我所知，在纯CSS中无法以交互方式更改页面布局。因此，要将面板移到彼此之下，您必须使用JavaScript，请听取此类window.onresize事件：

window.onresize = function(event)
{
    // check the width of the window and move the panels accordingly
}

对于隐藏的文本，这是因为您将图像转换为靠近屏幕。您必须将画布视为3D空间，并且您实际上并未将图像放大，而是将其移近观察者，因此现在文本就在图像的后面。要轻松解决此问题，请在z-index: 1;上设置.meta-info-doub。

我也试过找一个＆＃34;清洁＆＃34;修复此问题会产生完全相同的结果，但似乎不可能，至少不使用background-size和background-position，zoom或替换span标记div并将图片作为img标记放入其中，摆弄width，height，margin和padding。

Answer 2

在<div class="column-content">移动范围标记到顶部，在任何其他div之前

<div class="column-content">
  <span href="#" id="img-zoom" class="content-image" style="background-  image:url(http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg)"></span>
  <div class="meta-info-doub">
  <h3 class="date-double">23. Oktober 2015</h3>
  <h3 class="title-double">Post 1</h3>
</div>

就像你在其他两个帖子中所做的一样。

创建网格视图横幅响应

2 个答案: