Question

HTML

<div class="article">
            <a href="#"><img src="http://cdn1.tnwcdn.com/wp-content/blogs.dir/1/files/2013/01/Cookies1-520x245.jpg"/></a>
            <div class="dateAuthor">
                <span class="date">Jan 4, 2014</span>
                <span>&mdash; By </span>
                <span class="author">Jonathan Lakin</span>
            </div>
            <h1><a href="#">Cookies Tell You A Lot About Your Audience, But Most of it is Wrong</a></h1>
        </div><div class="article">
            <a href="#"><img src="http://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2014/01/20140103_151801-520x245.jpg"/></a>
            <div class="dateAuthor">
                <span class="date">Jan 4, 2014</span>
                <span>&mdash; By </span>
                <span class="author">Jonathan Lakin</span>
            </div>
            <h1><a href="#">Ten Website Trends To Expect</a></h1>
        </div>

CSS

.article{
    display: inline-block;
    vertical-align: top;
    margin: 0 1.6839378238341968911917098445596% 30px 1.6839378238341968911917098445596%;   /* 13px / 772px */
}
.article img{
    max-width: 360px;
    width: 100%;
    display: block;
}
.article h1{
    max-width: 350px;   
    width: 100%;        /* 350px / 800px */
    margin-top: 10px;
    font-size: 1.5em;
}
@media only screen
            and (max-width : 1000px) {
            #articlesWrapper{
                margin-left: 1.0416666666666666666666666666667%;    /* 10px / 960px */
                margin-right: 1.0416666666666666666666666666667%;   /* 10px / 960px */
            }
           }
@media only screen
            and (max-width : 720px) {
            .article img{
                max-width: 100%;
            }
            .article h1{
                max-width: 97.222222222222222222222222222222%;  /* 350px / 360px */
            }
           }

jsFiddle

这里的问题是当width低于850px inline-block样式不起作用且元素低于其他元素时，我想做的就是让那些响应。我的意思是，当width低于850px时，我希望元素保持为inline-blocks，而在宽度下降时减少size/width。类似720px下面发生的事情，但inline-blocks。怎么办？

Answer 1

http://jsfiddle.net/6wbfy/3/

这似乎很有效。

.article {
    width: 45%;
}

使内联块元素响应

1 个答案: