1. 首頁
  2. 問答
  3. 兩個彼此相鄰，全寬

兩個彼此相鄰，全寬

2012-11-18 161 views
3

我想做以下操作：兩個彼此相鄰，全寬

列A，寬度最大爲listitem | B列，與左側的寬度一樣，當超出時具有水平滾動框。

WIDTH：auto | WIDTH：100％;

list1 | adklajd lkasjdlk ajs kldajlkjd kalsd 
list222 | sdfsf 
list33 | sdfsdffds 
     | xxx

該怎麼辦？它並不容易。

編輯：http://jsfiddle.net/Y3p9F/ 和B柱進入新的生產線，我不希望它

來源

2012-11-18 user893856

+0

嗯......什麼？不確定你在問什麼。請使用jsfiddle。 – Dom

+0

爲什麼你會得到一個水平滾動條？ div是否被限制在特定的高度？ –

回答

7

您可以使用float和margin的組合來實現這一點：

<div id="colA"> 
    <!-- completely irrelevant mark-up --> 
</div> 
<div id="colB"> 
    <p><!-- Completely irrelevant text... --></p> 
</div>​

而CSS：

div { 
    padding: 0.2em 0.5em; 
} 
#colA { 
    float: left; 
    margin-bottom: 100%; /* to prevent the #colB text wrapping beneath #colA */ 
} 

#colB { 
    clear: right; 
}

JS Fiddle demo。

（僅在鉻22測試/ Ubuntu的12.10。）

來源

2012-11-18 23:26:21

+0

奇怪，但它的工作 – user893856

+0

是的，儘管如此，下邊是'margin-bottom'爲其父元素的'100％'延伸。不過，如果在另一個元素中包含'＃colA'和'＃colB' *，它將只在該容器元素中擴展。 =/ –

3

嗯

兩部分，以這種

  1. HTML
  2. CSS文件

HTML

<html> 
<div id='col1'> </div> 
<div id='col2'> </div> 
</html>

CSS

#col1 { 
float: left; 
width: auto; 
} 
#col2 { 
float: left; 
clear: right; 
width: 100%; 
}

說明 浮法基本上對齊的div到視（或畫面）的左和明確去除從第二塔的右側任何漂浮的項目。

這與設置爲100％的組合確保您的兩個div彼此相鄰，並且第一個div只有它需要的寬度，第二個填充剩餘空間到右側第一列。

來源

2012-11-18 23:31:01

+0

以及如何反轉？如果col1應該佔據所有的空間，它可以得到col2只有200px左右？ – mercsen

相關問題

 相關問題