1. 首页
  2. 问答
  3. 两个彼此相邻，全宽

两个彼此相邻，全宽

2012-11-18 199 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

相关问题

 相关问题