在CSS3中将这些元素/类彼此相邻

Question

我确信这很容易调试，但不管我有多长时间没遇到问题。 我试图让这两个元素彼此相邻。这是一个非常简单的想法。 It's literally just me trying to put two boxes next to each other.

之前我已经完成了这项工作，但我想我现在可以使用某人帮助调试我的代码。

它写的方式......

aside.left {
    display:inline-block;
    float: left;
    background: rgba(8, 78, 7, 0.7);
    width: 200px;
    text-align: center;
  }

section.right {
    display:inline-block;
    float: right;
    background-color: rgb(198, 207, 214);
}

所以我的理由是尝试将这两个元素转换为内联块，因为它们都是块类型。然后我尝试向右和向左浮动一个。 但这不起作用，只是使元素叠加在一起。

如何解决这个可能非常简单的错误？

Answer 1

你不需要漂浮任何东西，你可以使用flexbox来获得你正在寻找的布局，而不必担心浮动，清除和最小的数学。只需使用父容器包装元素，即可将flex属性添加到。

以下是一个例子：http://codepen.io/beepye/pen/KMzZjr

.wrapper {
  display: flex;
}

aside.left,
section.right {
  border:2px solid black;
  box-sizing: border-box;
  height:200px;
  padding:20px;
}

aside.left {
  background: rgba(8, 78, 7, 0.7);
  width: 20%;
  text-align: center;
  border-right: 0;
}

section.right {
    width:80%;
    background-color: rgb(198, 207, 214);
}

完全支持当前的浏览器：

但如果IE是一个问题，你可能需要一个后备。

Answer 2

您无需使用 display：inline-block 。 你只需要记住，块元素（div，section，aside等是每个默认的块元素）总是有100％的宽度，除非你在样式表中更改它。

https://jsfiddle.net/ay4d8hau/

在我的例子中，我使用了百分比大小的元素。

aside.left {
    float: left;
    background: rgba(8, 78, 7, 0.7);
    width: 20%;
    /* width:200px; */
    text-align: center;
  }

section.right {
    float: right;
    width:80%;
    /* width:600px; -> will only fit next to each other if the viewport is bigger than 800px */
    background-color: rgb(198, 207, 214);
}

对于像素宽度： 如果要使用像素宽度，则两个宽度的总和必须小于视口，以显示彼此相邻的两个元素。如果没有，元素将叠加在一起（参见我的代码示例）。

aside.left {
    width:200px;
  }

section.right {
    width:600px;
}

- ＆GT;如果视口大小大于800px（例如801px），则元素不会堆叠。

Answer 3

你不能浮动display: inline-block;个元素，它们会正确对齐。让它们阻塞而保持漂浮。

jsfiddle

<div class="clearfix">
  <div class="left">

  </div>
  <div class="right"></div>
</div>

.clearfix {
  display: table;
  content: '';
  clear: both;
}

.left {
  background-color: deepskyblue;
  float: left;
  height: 200px;
  width: 200px;
}

.right {
  background-color: deeppink;
  float: left;
  height: 200px;
  width: 200px;
}

Answer 4

您的section.right的大小是多少？如果你想要像图像这样的东西你可以做这样的事情（大致）。我个人更喜欢将我的两个容器都向左浮动，因为在休息时它们会在左侧结束（元素的自然流动，除非你正在进行RTL）。

aside.left {
    display:block;
    float: left;
    background: rgba(8, 78, 7, 0.7);
    width: 25%;
    text-align: center;
  }

section.right {
    width: 75%;
    display:block;
    float: left;
    background-color: rgb(198, 207, 214);
}

Answer 5

这是一个小提琴：https://jsfiddle.net/nfcv4w96/1/

flex或table显示可以解决您的问题。

将table与块元素包装器一起使用：

.table.wrap {
  display: table;
  border-collapse: collapse;
}

.table.left,
.table.right {
  display: table-cell;
}

使用flex（仍需要包装器）：

.flex.wrap {
  display: flex;
}

除了浏览器支持（MDN link），主要区别在于展开table的折叠边框。