两个div元素应该保持在一行中

Question

我有一个带有2个div的html页面，它们应该调整大小，但总是保持一行。 我怎么能建立这个？

我有以下示例html代码：

<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
  <div id="table">
  <table>
    <tr>
      <td>ONE</td>
      <td>TWO</td>
    </tr>
  </table>
  </div>
  <div id="sidebar">
    <p>This is a sidebar</p>
  </div>
</div>
</body>
</html>

样式表看起来像这样：

#content {
  width: 100%;
}

#table {
  width: 100%;
  background-color: red;
  display: inline-block;
}

#sidebar {
  width: 170px;
  background-color: blue;
  float: right;
  display: inline-block;
}

Answer 1

将您的内容css更改为

#content {
width: 100%;
display:inline-block;
}

但是这里你的表格宽度设置为100％，主div在同一行中接受170px。

在#table超过81％后，它将内容推送到下一行

Answer 2

使用浮点数和calc（）函数

这是使用浮点数和calc()函数（CSS3）执行此操作的一种方法：

#content {
  width: 100%;
  border: 1px dotted gray;
  overflow: auto; /* useful for enclosing the floated region */
}
#table {
  float: left;
  width: calc(100% - 170px); /* modern but not yet widely supported */
  background-color: red;
}
#table table {
  border: 1px solid yellow;
  width: 100%; /* '100%' for full-width; 'auto' for shrink-to-fit content */
}
#sidebar {
  float: right;
  width: 170px;
  background-color: blue;
}

将#table和#sidebar分别向左和向右浮动。

浮动元素时，除非指定宽度值，否则它将计算为缩小到适合的值。

如果在#table上指定width: 100% ，这将强制侧边栏在新行上开始。

要为侧边栏calc(100% - 170px)空间，请使用calc(100% - 170px)计算表格面板的理想最大宽度。

最新的浏览器支持calc()函数，因此该解决方案可能不合适。

见演示小提琴

Answer 3

您将#content宽度设置为100％，因此占用整个空间。 您需要调整div的宽度并将#content浮动到左侧，以便计算为100％。

Answer 4

Float:left;

对于这两个div然后将它们放在一个包装中然后调整包装大小，但是你希望它看起来。

.wrap {

 width: 500px;
 height:800px;
}

所以对于你的代码，CSS：

#content {
  width: 100%;
}
#wrap {
  height: 100%;
  width: 100%;
}
#table {
  width: 60%;
  background-color: red;
  display: inline-block;
  float: left;
}
#sidebar {
 width: 170px;
 background-color: blue;
 float: right;
 display: inline-block;
 float: left;
}

HTML：

<body>
<div id="wrap">
<div id="content">
  <div id="table">
  <table>
    <tr>
      <td>ONE</td>
      <td>TWO</td>
    </tr>
  </table>
  </div>
  <div id="sidebar">
    <p>This is a sidebar</p>
  </div>
</div>
</div>
</body>

Answer 5

看看这个小提琴......它有助于实现你所需要的。

这是更新的CSS ..

#content {
  width: 100%;
}

#table {
    float: left;
  background-color: red;
  display: inline-block;
    width: 60%;
}

#sidebar {
    float: left;
  width: 170px;
  background-color: blue;
  float: right;
  display: inline-block;
}