1

最大幅が 1200px のページがあります。

左側のセクションは840px、または70%この中に、左側に詳細が40pxあり、残りは修正したい記事があり800pxます。

記事は100%wideです。classという名前の要素は isで、 (840px max)class という名前の要素はレスポンシブであると想定されます。homeArtDets40pxhomeArt95.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/

4

1 に答える 1

1

このような？http://jsfiddle.net/thirtydot/59J5D/1/

.homeArtDets {
    float: left;
    width: 40px;
}
.homeArt {
    overflow: hidden;
}
于 2013-07-05T10:48:43.803 に答える