如何將兩個div放在同一行上並讓它們響應？

我發現如何在一個屏幕大小的同一行上放置兩個div，但我無法使其響應。正確的圖像只是在左邊的div下面。這裏是我的CSS和HTML如何將兩個div放在同一行上並讓它們響應？

<div id="my-wrapper" style=" 
    max-width: 941px; 
    width: auto; 
    height: auto;"> 
    <div class="left-stuff" style=" 
    float: left; 
    max-width: 100px; 
    width: auto; 
    height: auto;"> 
     <img alt="" src="blah1.png" 
      style="width: auto; height: auto; max-width:100px;"> 
     <img alt="" src="blah2.png" 
      style="width: auto; height: auto; max-width: 100px;"> 
     <img alt="" src="blah3.png" 
      style="width: auto; height: auto; max-width: 100px;"> 
    </div> 
    <div class="right-stuff" style="float:right;"> 
    <img src="banner.png" style="width: auto; height: auto; max-width:100%;"> 
    </div></div>

一個例子可以在這裏找到：http://jsfiddle.net/TachionFiddle/c9EYe/4/

來源

2014-07-26 Will

你能分享與圖像的實時鏈接嗎？ –

我已經放置鏈接 – Will

浮標AREN」所提供的空間因爲它將它從佈局中剝離出來，所以它也能夠正常工作。

我推薦inline-block並設置每個width:50%。

你必須確保圖像不會破壞你的div，所以做max-width: 95%或更少的東西。取決於有多少。

來源

2014-07-26 20:51:05 beautifulcoder

我得到的結果顯示在這個jsfiddle鏈接：http://jsfiddle.net/TachionFiddle/9U79C/1/我做錯了什麼？ – Will

它不工作的原因是容器元素上的最大寬度：100px，因爲您沒有設置顯示：inline-block： http://jsfiddle.net/9U79C/3/ –

這可能更多你正在尋找。我爲圖片添加了最大寬度：100％： http://jsfiddle.net/9U79C/4/ –

首先請看移動你的風格融於CSS樣式表。

這裏是你的問題的快速刺 - 請注意，這不會在IE版本8及以下正常工作：

<div id="my-wrapper" style=" 
max-width: 941px; 
width: auto; 
height: auto;"> 
<div class="left-stuff" style=" 
    float: left; 
    max-width: 20%; 
    width: 100%; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box; 
    height: auto;"> 
     <img alt="" src="blah1.png" 
     style="width: auto; height: auto; max-width:100px;"> 
     <img alt="" src="blah2.png" 
     style="width: auto; height: auto; max-width: 100px;"> 
     <img alt="" src="blah3.png" 
     style="width: auto; height: auto; max-width: 100px;"> 
    </div> 
<div class="right-stuff" style="max-width:80%;width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;float:right;"> 
<img src="banner.png" style="width: auto; height: auto; max-width:100%;"> 
</div></div>

有3個變化在這裏：

1）以百分比指定寬度 - 因此無論屏幕有多大，div都會按比例縮放以匹配

2）box-sizing：border-box - 這改變了瀏覽器渲染div的寬度以包含填充和邊框的方式。如果你指定寬度：50％，填充：20像素沒有邊框，你最終會得到一個寬50％+填充20像素的div，這當然大於50％。邊界框強制框的總寬度爲50％;

3）最大寬度相當自我解釋 - 通過設置在左側箱20％和右框的寬度，以80％的組合寬度將始終填充由父元素

來源

2014-07-26 20:47:55

是的，這只是一個快速骯髒的例子，看看我能做到這一點。我顯然不會在實際的HTML中放入那麼多樣式。謝謝你的回答，我正在研究每個人寫的內容。 – Will

我還沒有嘗試過，但它看起來很有希望。如果上面的答案沒有給出一個跨瀏覽器的答案，我會更仔細地看看你的答案。 – Will

如何將兩個div放在同一行上並讓它們響應？

回答

相關問題