創建一個固定寬度的元素和一個響應元素在一起

我有一個最大寬度爲1200px的頁面。創建一個固定寬度的元素和一個響應元素在一起

左半部分是840px或70%在此也將是這對左40px，我想保持固定的響應，其餘800px細節的文章。

這篇文章是100%寬(840px max)，其中有一個名爲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>

承擔這個下面搗鼓

我有它的jsfiddle這裏http://jsfiddle.net/59J5D/

來源

2013-07-05 Pierce McGeough

這樣的樣子？ http://jsfiddle.net/thirtydot/59J5D/1/

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

來源

2013-07-05 10:48:43 thirtydot

是的，就是這樣。所以我的錯誤是給家裏一個寬度和浮動它？ –

這不是一個錯誤。我已[使用簡單的解決方案]（http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats）解決您的問題。 – thirtydot

是的，我也使用它的背景顏色不會自動填充填充其他元素和div的包裝。 http://stackoverflow.com/questions/17055372/background-colour-not-filling-div –

創建一個固定寬度的元素和一個響應元素在一起

回答

相關問題