css - 一起创建一个固定宽度的元素和一个响应式元素

Question

我有一个最大宽度为 1200 像素的页面。

左边的部分是840px或70%在这里面会有一些文章，左边40px有我想保持固定的细节，其余的都是800px响应式的。

这篇文章很100%宽泛(840px max)，类命名的元素homeArtDets是，类命名的40px元素是响应式的。homeArt95.23809523809524% (800px max, 800/840 * 100)

这是html结构

<article>
    <div class="homeArtDets">
        <div class="homeArtCat">BLG</div>
        <div class="homeArtDate">05<br>Jun<br>2013</div>
    </div>
    <div class="homeArt">
        <div class="homeArtText">
            <h2>New Adventures Conference</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, dolorem, obcaecati sint odit ad sit provident nesciunt nobis eaque vel saepe harum in cumque fugit fuga quas accusamus illo est hic necessitatibus rerum debitis ipsum mollitia error possimus. Atque, asperiores quibusdam nemo nesciunt! Nesciunt, amet numquam impedit sit cum vitae.</p>
        </div>
        <div class="homeArtImg"><img src="images/newadventures.jpg" alt=""></div>
        <div class="homeArtInfo"><p>Posted on 5th June 2013 by Pierce McGeough</p></div>
    </div>
</article>

看看下面这个小提琴

我在 jsFiddle 上有它http://jsfiddle.net/59J5D/

Answer 1

像这样？http://jsfiddle.net/thirtydot/59J5D/1/

.homeArtDets {
    float: left;
    width: 40px;
}
.homeArt {
    overflow: hidden;
}