「未指定的寬度固定」+流體佈局

這應該很容易在2012年：P「未指定的寬度固定」+流體佈局

我需要做的是有2個div，並排。左邊的包含一張桌子。正確的一個包含谷歌地圖。

左div需要擴展儘可能多的以適應表的寬度（所以它是一個「固定寬度」列，但寬度不是我指定的）。它的寬度是固定的，因爲如果瀏覽器被調整大小，表格會佔用相同數量的像素。我不想指定寬度，因爲表格可以是任意大小。

正確的div需要佔用剩下的空間。

任何人都知道如何做到這一點？我甚至不知道如何在谷歌搜索這個。我在網上看到的每個「固定/流體」佈局對於固定列具有指定寬度。

來源

2012-12-22 user275801

不可能用CSS：使用jQuery或Javascript –

P哇，吸:(可以」相信W3C還沒有想出這一個呢？ – user275801

是的，我幾天前看到一個類似的問題，需求是一樣的！我問他我可以幫助Jquery但他不想用它！ –

約CSS什麼：

<div id="firstTable"><table id="myTable"><tr><td>Hello World!</td></tr></table></div> 
<div id="secondTable"><div id="myMap"></div></div>

來源

2012-12-22 16:10:06 ATOzTOA

以及他知道如何將它們並排添加....請閱讀整個問題！ –

@AspiringAqib更新中... – ATOzTOA

@ATOzTOA什麼是空表？ –

嘗試

#firstTable{ 
    display:inline; 
    width:auto; 
} 

#secondTable{ 
    display:inline; 
    width:auto; 
} 

#myTable{ 
    width :"100px" 
}

HTML出這一點：

HTML標記

<div id="container"> 
    <div class="gmap"></div> 
    <div class="table"></div> 
</div>

與CSS

#container { 
    position: relative; 
} 
.table, .gmap { 
    position: absolute; 
    top: 0; 
    height: 300px; 
} 
.table { 
    left: 0; 
    right: 150px; /* width of gmap */ 
} 
.gmap { 
    right: 0; 
    width: 150px; 
}

或使用jQuery

var containerWidth = jQuery('#container').innerWidth(); 
var tableWidth = jQuery('.table').outerWidth(); 

jQuery('.gmap').width(containerWidth -tableWidth);

JSFIDDLE_WITH_CSS JSFIDDLE_WITH_JAVASCRIPT

來源

2012-12-22 16:44:37 algorhythm

我注意到你正在設置gmap的寬度，但我想避免指定寬度gmap或table。Basicall Ÿ瀏覽器應該知道表的寬度，並且應該只將剩餘的寬度分配給gmap。以你爲例，gmap的寬度爲150px，但我的顯示器寬度爲1920像素，表格寬度大約爲150px。這意味着有很多空白。 – user275801

使它與JavaScript。計算像這樣缺失的寬度：http://jsfiddle.net/gMfX4/ – algorhythm

感謝@algorhythm，將嘗試jquery :)謝謝你的jQuery示例。 – user275801

「未指定的寬度固定」+流體佈局

回答

相關問題