html - 如何并排获得两个div？ (表结构是老式的)

Question

好的。我知道如何做到这一点，因为做同一件事有多种方法，而且我也知道这是一个非常基本的问题，但经常做错。

提出这个问题的目的是了解在任何情况下都不会增加 div 位置的最合适/标准的方式。我希望网站结构保持完整，无论网站发生什么情况(例如，当重新调整窗口大小时)。

我不想看到一行一行的样式，行数越少越好，如果有一种方法可以将其实现为 div 标签属性，那就太棒了。

[![enter image description here][1]][1]

<!-- Main div -->
<div>
  <!-- first div, which need to be aligned on the left -->
  <div>
  </div>
  <!-- second div, which need to be aligned on the right,
parallel to the 1st div, not after the 1st div-->
  <div>
  </div>
  <!-- Closing tag of main div-->
</div>

我发现这是一个很棒的资源:https://css-tricks.com/all-about-floats/

Answer 1

给你，我相信这个解决方案的行数最少

div {
  float: left;
  padding: 10px 40px 10px 40px;
  border: 1px solid black;
  }

<div>
  <div>SAMPLE TEXT1</div>
  <div>SAMPLE TEXT2</div>
</div>

拥有内联内容的其他一些方法:

1. 内联 block

2. 内联属性

3. 显示:表格单元格
4. flex 盒

首先，我需要提一下 float 元素的简单优点和缺点。

缺点

• float 元素下方的任何内容都必须具有clear属性。

优点

• 完整的浏览器支持，甚至可以在 IE6/7 中使用。

---

内联 block

下面是根据 Able Varghese 给出的示例使用 inline-block 的代码片段:

div {
  display: inline-block;
  padding: 10px;
  border: 1px solid black;
  }

<div>
  <div>SAMPLE TEXT1</div>
  <div>SAMPLE TEXT2</div>
</div>

缺点

• 浏览器支持不如 float 解决方案那么多。

优点

• 没有那么多标记。
• 更易于控制和使用。

---

内联

这是使用 display: inline; 的代码片段。

div {
  display: inline;
  padding: 20px;
  margin: 10px;
  border: 1px solid black;
  }

<div>
  <div>SAMPLE TEXT1</div>
  <div>SAMPLE TEXT2</div>
</div>

缺点

• 从代码片段中可以看出，内联显然不如其他两种解决方案有效。 -IE6/7 支持需要额外的标记。

优点

• 老实说我想不出任何。如果大家知道的话请在评论中留言。但出于所有一般目的，我认为您不应该使用此解决方案。

---

显示:表格单元格；

如果此特定代码片段中有任何错误，请在评论中指出。我从未使用过这个解决方案，我只是听说过它，所以这将是我第一次使用它。

这是代码片段

div {
  display: table-cell;
  padding: 10px;
  border: 1px solid black;
  }

<div>
  <div>SAMPLE TEXT1</div>
  <div>SAMPLE TEXT2</div>
</div>

缺点

• 如果您要使用此解决方案，这与将您的布局设置为一个非常大的表格没有什么不同。 (相信大家都知道是怎么回事。)

优点

• 由于这就像一个表格，div“应该”很容易控制，但我对这个特定的解决方案缺乏经验，所以不要打赌我的这个理由是正确的。

---

flex 盒

这是使用 Flexbox 的代码片段:

div {
  display: flex;
  padding: 10px;
  border: 1px solid black;
  }

<div>
  <div>SAMPLE TEXT1</div>
  <div>SAMPLE TEXT2</div>
</div>

注意:Flexbox 的真正威力绝对不会在此示例中显示出来。

缺点

• 截至目前，只有少数浏览器实现了此解决方案。

优点

• 这是一个极其强大的解决方案，因为它易于控制、使用和理解。

---

还有很多其他解决方案

这些是我所知道的常见解决方案。如果还有的话，(不管有没有用)请在评论区留言。

摘要:

总而言之，这只是开发者的选择。以及三种最常用的解决方案:(float、inline-block 和 Flexbox)。这是一个选择，是牺牲浏览器支持而不是可用性，还是牺牲可用性而不是浏览器支持。您的选择。