Question

我想在一个方框中制作2个全宽列。第一列有宽度：auto我希望第二列在100％减去第一列的宽度，因此它们可以显示内联。有人可以帮助我吗？

Answer 1

已更新结帐这个小提琴： http://jsfiddle.net/cvxr31xo/2/

<div id="major">
    <div id="one">Hello</div>
    <div id="two">World</div>
</div>

#major {
    width: 100%;
    border: 1px solid black;
}

#one {
    width: auto;
    float: left;
    background-color: green;
    height: 100px;
}

#two {
    width:auto;
    min-width:100%;
    background-color: blue;
    height: 100px;
}

如果您需要其他功能，请告知我们我会更新

Answer 2

我不确定你是否会在桌面或DIV之后为此做这件事。

<div style="width:100%; border:1px solid red;">     
  <div style="display: inline; border: 1px solid black;">Some content</div>
  <div style="display: inline; border: 1px solid black;">Some more content</div>
</div>

盒子div中的第二个div不是100％宽，但是如果那是你之后的内容，那么两个div都会扩展到内容......

Answer 3

为了达到这个目的，我想你要么必须使用表格，要么模仿表格。

表格

<table style="width: 100%"> <td>col1</td> <td>col2</td> </table>

<强>的div

<div style="width: 100; display: table"> <div style="display: table-cell">col1</div> <div style="display: table-cell">col2</div> </div>

两种解决方案都应使列加起来达到100％并且两列都具有自动宽度。浏览器会根据其内容为其分配宽度，这取决于它们的内容，因此它实际上不会首先独立地调整第1列，然后为第2列分配剩余空间，但会找到＆＃34;最佳折衷＆＃ 34;两列。

编辑：@Charlie的基于浮点的解决方案在某种意义上实际上更好，因为它确实独立地调整左列的大小。但是，如果左列变得太大，布局可能会中断。

Answer 4

为了实现你想要的，@查理回答得非常好，完美答案。 https://stackoverflow.com/a/26757381/3964593

我不知道你是想动态制作它，还是想要达到目标，但是，如果一个div的内容比另一个更大，你应该准备好处理它。就像确保你为一个或两个div设置最大宽度一样，设置适当的高度px＆＃39; s或百分比等，使其表现正常。

Answer 5

试试这段代码......

<div style="width:100%;">     
  <div style="float:left; width:49.7%; border: 1px solid black;">Some content </div>
  <div style=" float:right; width:49.6%; border: 1px solid black;">Some more content </div>
</div>

全宽两列html

5 个答案: