如何仅将2div下的3div包装？我应该使用flexbox吗？

Question

我正在尝试将3div包裹在2div之下。 HTML看起来像这样：

<div class="box">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

如何使第3个div环绕在第2个div下而不是第一个div下？

我尝试使用flexbox，但是第三个div包裹在第一个之下。我尝试使用flex网格，但是第二个div的高度必须灵活，因为它将包含文本。因此，如果有很多文字，它将3往下推一点。

当前，div是堆叠的，但我需要它们像右边的布局一样：

Answer 1

您可以尝试grid-template-areas：

.box {
  display: grid;
  grid-gap: 8px;
  grid-template-areas:
    "a a b"
    "a a c";
}

.box > div {
  min-height: 100px;
  padding: 8px;
  background: pink;
}

.one {
  grid-area: a;
}

.two {
  grid-area: b;
}

.three {
  grid-area: c;
}

<div class="box">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
</div>

要处理内容，您必须使用其他网格属性（例如grid-template-columns，grid-auto-columns等）。

Answer 2

您可以将2和3 Traceback (most recent call last): File "getRds.py", line 18, in <module> conn = pymysql.connect(rds_host, user=name, passwd=password, db=db_name, connect_timeout=10) File "/usr/local/lib/python2.7/dist-packages/pymysql/__init__.py", line 94, in Connect return Connection(*args, **kwargs) File "/usr/local/lib/python2.7/dist-packages/pymysql/connections.py", line 327, in __init__ self.connect() File "/usr/local/lib/python2.7/dist-packages/pymysql/connections.py", line 598, in connect self._request_authentication() File "/usr/local/lib/python2.7/dist-packages/pymysql/connections.py", line 862, in _request_authentication auth_packet = self._process_auth(plugin_name, auth_packet) File "/usr/local/lib/python2.7/dist-packages/pymysql/connections.py", line 933, in _process_auth pkt = self._read_packet() File "/usr/local/lib/python2.7/dist-packages/pymysql/connections.py", line 683, in _read_packet packet.check_error() File "/usr/local/lib/python2.7/dist-packages/pymysql/protocol.py", line 220, in check_error err.raise_mysql_exception(self._data) File "/usr/local/lib/python2.7/dist-packages/pymysql/err.py", line 109, in raise_mysql_exception raise errorclass(errno, errval) pymysql.err.InternalError: (1049, u"Unknown database 'bsb-rds'") 包装在另一个div中，并使用flex这样的东西：

div

.box, other {
  display: flex;
}

.square {
  padding: 38px;
  background: #fc6088;
  margin: 5px;
}

用大文本检查第二个片段，让我知道这是否是期望的行为