Question

我想做以下事情：

列A，与最大listitem |的宽度相同B列，宽度与左侧相同，超载时有水平滚动框。

WIDTH：auto |宽度：100％;

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

怎么做？它甚至不容易。

编辑：http://jsfiddle.net/Y3p9F/ 并且B列转到新行，我不想要它

Answer 1

您可以使用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

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

Answer 2

嗯

本部分的两个部分

HTML
CSS for file

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彼此相邻，并且第一个div只有它需要的宽度，第二个填充剩余的空间到右边的第一栏。

两个div彼此相邻，全宽

2 个答案: