两个div显示内联

Question

我匆匆忙忙地看着css，一个div应该彼此相邻而不是第一个div

我想要实现的是在我拍摄的这张照片中

我正在使用plunker

http://jsfiddle.net/ao98u6vy/1/

但无法解决

see my image and plunker

Answer 1

您是否能够使用css Flexbox，这在所有现代浏览器中都得到了很好的支持。如果你那么你可以将你的包装容器的显示设置为flex，如下所示。

#wrapper {
    border: 1px solid blue;
    display: flex;
}

Answer 2

在ID为wrapper

的父div上使用display flex

#wrapper {
  border: 1px solid blue;
  display: flex;
}

Answer 3

这样做的一种方法是将display: flex;设置为包装器：

#wrapper {
  display: flex;
}

或者按照您的方法添加float和box-sizing道具

body {
  box-sizing: border-box;
}
* {
  box-sizing: inherit;
}
#wrapper {
  border: 1px solid blue;
}
#div1 {
  display: inline-block;
  width:20px;
  height:20px;
  border: 1px solid red;
}
#div2 {
  display: inline-block;
  width: calc(100% - 20px);
  border: 1px solid green;
  float: right;
}

Answer 4

以下代码应该有效。

 #wrapper {
      border: 1px solid blue;
 }
#div1 {
    display: inline-block;
    width:20px;
    height:20px;
    border: 1px solid red;
    vertical-align:top;
}
#div2 {
    display: inline-block;
    max-width: 95%;
    border: 1px solid green;
}

Answer 5

#wrapper {
    border: 1px solid blue;
    display: flex;
}