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

Question

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

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

文章是 100% 宽 (最大 840px)，具有名为 homeArtDets 的类的元素是 40px 并且具有名为 homeArt 的类的元素是 95.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>

看看下面这个 fiddle

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

Answer 1

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

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