三列布局圖像應以兩種分辨率（1024×768和1366×768）爲中心

Question

我已經在堆棧溢出中搜索了我的問題。我已經得到答案。但是對於當前的問題，答案還不夠。

下面是代碼

<div id="firstdiv"> 
     Testing 1 
    </div> 
    <div id="middlediv"> 
     <img src="image/testing.png" width="950px" height="150px"/> 
    </div> 
    <div id="lastdiv"> 
     Testing 2 
    </div> 

這裏是CSS

#firstdiv 
    { 
     width:20%; 
     position:absolute; 
     border:1px solid DarkGrey; 
     float:left; 
    } 
    #middlediv 
    { 
     width:60%; 
     border:1px solid Blue;   
     margin-left:21%; 
    } 
    #lastdiv 
    { 
     width:20%; 
     border:1px solid red; 
     position:absolute; 
     float:right; 
    } 

我的問題

我需要三個欄佈局的第一列應該是在中間留下的圖像和最後一列應該是正確的（在所有決議中）。

注：我不想使用RWD方法。

請幫助我解決上述問題。

如果您還不明白的問題，請回復。請不要阻止我的帳戶。

感謝&問候 馬哈德

Answer 1

這樣嗎？

http://jsfiddle.net/BrYbJ/

HTML：

<div class="box"> 
    <div id="firstdiv">Testing 1</div><!-- 
    --><div id="middlediv"><img src="image/testing.png" width="950px" height="150px"/></div><!-- 
    --><div id="lastdiv">Testing 2</div> 
</div> 

CSS：

.box { 
    white-space:nowrap; 
} 

.box div { 
    display:inline-block; 
    vertical-align:top; 
} 

#firstdiv 
{ 
    width:20%; 
    outline:1px solid DarkGrey; 
} 
#middlediv 
{ 
    width:60%; 
    outline:1px solid Blue;   
    position:relative; 
} 
#middlediv img { 

Answer 2

而不是使用position: absolute的，腠可以嘗試使用display: inline-block和刪除HTML空白：

jsfiddle

HTML：

<div id="firstdiv">Testing 1</div><div id="middlediv"><img src="image/testing.png" /></div><div id="lastdiv">Testing 2</div> 

CSS：

#firstdiv { 
    width:20%; 
    display: inline-block; 
} 
#middlediv { 
    width:60%; 
    display: inline-block; 
} 
#lastdiv { 
    width:20%; 
    display: inline-block; 
} 

請記住，如果您不使用border-box，那麼使用邊框會影響元素的大小。

Answer 3

#firstdiv 
{ 
    width:20%; 
    outline:1px solid DarkGrey; 
    float:left; 
} 
#middlediv 
{ 
    width:60%; 
    outline:1px solid Blue;   
    float:left; 
} 
#lastdiv 
{ 
    width:20%; 
    outline:1px solid red; 
    float:left; 
} 

這應該做的伎倆