3

我想做以下事情：

A 列，与最大列表项一样宽 | B列，与左边一样宽，重叠时有水平滚动框。

宽度：自动 | 宽度：100%；

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

这该怎么做？它甚至不容易。

编辑： http: //jsfiddle.net/Y3p9F/ 和 B 列换行，我不想要它

4

2 回答 2

8

您可以使用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 小提琴演示。

（仅在 Chromium 22/Ubuntu 12.10 中测试。）

于 2012-11-18T23:26:21.323 回答
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%;
}

解释 Float 基本上将 div 对齐到视口（或屏幕）的左侧，并清除从第二列右侧删除任何浮动项目。

这与设置为 100% 相结合可确保您的两个 div 彼此相邻，并且第一个仅与需要的一样宽，第二个填充第一列右侧的其余空间.

于 2012-11-18T23:31:01.607 回答