css定位2格div div

我有一個主div有100％的寬度，並在其中2格。一個有200px寬度，其他的將是100％-200px，我的意思是;css定位2格div div

-----------------this is main div ------------- 
|            | 
| ----subdiv1---- -------------subdiv2----------| 
||    | |       || 
| -------------- ---------------------------- | 
|-----------------------------------------------|

subdiv1有200個像素，subdiv2的寬度將是其餘空間。我搜索谷歌，但無法找到。

來源

2012-01-31 Malixxl

這裏是一個可能的解決方案我砍死了使用最左邊的DIV一個float: left規則，以及正確的DIV一個margin-left規則：http://jsfiddle.net/P4xMj/

示例HTML：

<div id="container"> 
    <div id="left"> 
     Some content here 
    </div> 
    <div id="right"> 
     Some more content goes over here on the right. Let's make this 
     content really long to see what happens when we wrap more than 
     one or two line's worth. Extra text to fill the void. 
    </div> 
</div>

範例CSS（中背景顏色只是爲了知名度）：

#container { 
    background: #FF0; 
    overflow: auto; 
    padding: 10px; 
} 

#left { 
    background: #0F0; 
    float: left; 
    width: 200px; 
} 

#right { 
    background: #F00; 
    margin-left: 210px; 
}

來源

2012-01-31 00:25:13

工作，謝謝。 – Malixxl 2012-01-31 00:28:26

很高興幫助。請務必將答案標記爲已接受，以便未來的互聯網訪問者知道它對您有所幫助。它也將幫助你提高你的接受率。 – 2012-01-31 00:31:25

您將要添加float:left;到yo ur subdiv1。以下是幾行代碼，可以生成您所展示的內容。

<div> 
    <div style="float:left;width:200px;background:#0F0"> 
    SUBDIV1 
    </div> 
    <div style="background:#F00;"> 
    SUBDIV2 
    </div> 
</div>

總之，使用float:left;您subdiv1

來源

2012-01-31 00:28:11

可以float: left左div，並有右側divmargin-left: 200px。

http://jsfiddle.net/SpxH9/

HTML：

<div id="container"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div>

CSS：

#container { 
    overflow: hidden; 
} 
#left { 
    float: left; 
    width: 200px; 
} 
#right { 
    margin-left: 200px; 
}

還有另一種技術，您可以使用，這是替代margin-leftwith overflow: hidden。這很有用，因爲您不必在那裏有兩次維度，並且它更容易適應變化。

例如，10px邊界：http://jsfiddle.net/SpxH9/1/

#container { 
    overflow: hidden; 
} 
#left { 
    float: left; 
    width: 200px; 
} 
#right { 
    overflow: hidden; 
}

如果你試圖做同樣的事情與我提到的第一種技術，你會發現，你需要手工計算的東西：http://jsfiddle.net/SpxH9/2/（和固定：http://jsfiddle.net/SpxH9/3/）

最後，overflow: hidden在#container用於包含浮游物。您可能希望使用clearfix。

來源

2012-01-31 00:29:39 thirtydot

css定位2格div div

回答

相關問題