CSS 将两个具有相对宽度的 div 并排放置

Question

#wrapper {
    width: 100%;
}

#canvas {
    width: 80%;
    height: 300px;
    border: 1px solid black;
}

#chat {
    width: 15%;
    height: 300px;
    border: 1px solid black;
}

这里有很多关于这个的问题，但它总是用绝对 px 宽度解决。有没有办法将这两个 div 并排放置？我不想给出具体的宽度，因为我希望它在不同的屏幕上看起来不错。

编辑：

<div id="wrapper">
    <div id="header">

    </div>
    <div id="content">
        <div id="canvas">

        <div>
        <div id="chat">

        </div>
    </div>
</div>

Answer 1

您可以使用内联样式或浮动。

#wrapper {
  width: 100%;
}

#canvas,
#chat {
    display: inline-block;
    vertical-align: top;
}
#canvas {
  height: 300px;
  border: 1px solid black;
}

#chat {
  height: 300px;
  border: 1px solid black;
}

Answer 2

只需添加此 css 规则：

#content > div {
    float: left;
}

另一种方法是将属性显示 inline-block 设置为 #content 个孩子，如下所示：

#content > div {
     display: inline-block;
}

答案还是对的。您的 html 有错别字，您没有正确关闭 canvas div。您已将 <div> 改为 </div>.

试一试here

Answer 3

如果你想要超过 2 个 div。只需分配宽度属性和 float: left;

HTML

<div class="outer">
 <div class="inner">Left</div>
 <div class="inner">Middle</div>
 <div class="inner">Right</div>
</div>

CSS

.outer {
    width: 600px; /*width of outer box */
}

.inner {
    float: left; width: 100px; /* Width of each box */
}

演示版http://jsfiddle.net/_pirateX/yxL3fg16/

Answer 4

我认为没有必要考虑宽度，如果使用 bootstrap class，则不需要声明很多 css。例如：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 col-md-6">
      <div style="background-color:#0e0e0e;">column-1</div>
    </div>
    <div class="col-sm-6 col-md-6">
      <div style="background-color:#ff0000;">column-2</div>
    </div>
  </div>
</div>

是这个意思吗？

CSS 将两个具有相对宽度的 div 并排放置

CSS place two divs with relative width next to each other

html

css

css-float