如何創建2個全屏列，第一個具有響應式圖像，第二個具有文本

Question

我嘗試構建一個包含2列的頁面。第一個我想採取70％的屏幕和另一列需要20％。

在第一列中，我嘗試使用CSS或腳本來放置響應圖像，但沒有任何東西能夠滿足我的視線。

你有什麼想法？

感謝您寶貴的時間！

例如：http://www.screencast.com/t/0SddrUSln5

一些技術如下：

1）自舉...

<div class="col-xs-12 col-sm-6 col-lg-10"> 
<img src="img/intro_img.jpg" alt="" style="width:100%;"> 
</div> 

<div class="col-xs-6 col-lg-2"> 
sidebar 
</div> 

2）全屏的jQuery腳本

http://blog.aaronvanderzwan.com/2012/07/maximage-2-0/

但我做不到不知道如何生成一個邊欄「推」全屏幕圖像，不要掉以輕心。

3）Class "responsive-img"

Τhe圖象從未填充屏幕的70％ορ80％，非常薄的白邊在底部存在。實際上在83,67 ....％當它出現84％滾動條出現時，沒有全屏列。

我是新來的傢伙在這裏...... 我希望能好好解釋一下......

Answer 1

不知道你的要價....但是，如果你想設置一個div的寬度只佔用屏幕的20％，你可以使用這個：

#div{ 
width: 20% 
} 

接下來，只要用DIV ID的div標籤，它會佔據屏幕的20％。

這是你要求的嗎？

Answer 2

這是我從你的解釋中理解的。 jsfiddle

你能分享你的確切位置卡住你的位置嗎？

HTML

<div class="content"> 
    <img src="http://placekitten.com/200/300" class="responsive-img" /> 
</div> 
<div class="sidebar"> 
    text here 
</div> 

CSS

.sidebar { 
    width: 20%; 
    float: right; 
    border: 1px solid; 
    min-height: 250px; 
} 
.content { 
    width: 70%; 
    float: left; 
    border: 1px solid; 
    min-height: 250px; 
} 
.responsive-img { 
    width: 100%; 
}