如何并排获得两个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. 内联块

2. 内联属性

3. display：table-cell
4. Flexbox的

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

缺点

• 浮动元素下面的任何内容都必须具有明确的属性。

赞成

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

内联块

以下是根据Able Varghese给出的示例使用内联块的代码段：

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

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

缺点

• 没有浮动解决方案那样多的浏览器支持。

赞成

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

内联

以下是使用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支持需要额外的标记。

赞成

• 老实说，我想不出任何一个。如果你们中的任何人知道一个，请在评论中发布。但是出于一般目的，我认为你不应该使用这个解决方案。

显示：table-cell;

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

以下是代码段

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

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

缺点

• 如果您要使用此解决方案，那么将您的布局设置为非常大的表就没有什么不同。 （我相信每个人都知道这是怎么回事。）

赞成

• 由于这就像一张桌子，div“应该”易于控制，但我对这个特定的解决方案缺乏经验，所以不要因为这个原因而做出任何我正确的赌注。

Flexbox的

这是使用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）。它可以选择是否牺牲浏览器支持而不是可用性，或者是否可用于浏览器支持。你的选择。

Answer 2

在我看来，适当的方法是将div1和div2的宽度设置为百分比，在这种情况下即使调整窗口大小也不会产生任何问题。