将两个div彼此对齐，并将第三个div对齐

Question

如何将两个div并排放置，而第三个div放在它们下面？像这样：

我的当前代码如下：

HTML：

...
public function getSefUrl($url) {

        $url_clean  = str_replace('index.php?', '', $url);
        parse_str($url_clean, $output);

        $component  = empty($output['option'])  ? 'com_index'   : $output['option'];
        $task               = empty($output['task'])        ? 'index'           : $output['task'];

        $path           = 'components/'.$component.'/routes/routes.json';
        $data           = json_decode(file_get_contents($path));

        if (!empty($data)) {
            foreach($data as $route) {
                $this->map($route[0], $route[1], $route[2], $route[2]);
            }
        }

        $route_info = $this->findUrlFromRoutes($task);
        return empty($route_info) ? $url : $this->generate($route_info->task, $output);
    }
...

CSS：

<div id="container">
    <div class="div-1">div1</div>
    <div class="div-2">div2</div>
    <div class="div-3">div3</div>
</div>

Answer 1

您可以使用 Flexbox

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#container div {
  padding: 20px;
  border: 1px solid black;
  margin: 10px; 
}

.div-1, .div-3 {
  flex: 1 1 0;
}

.div-2 {
   flex: 100%;
   order: 3;
}

<div id="container">
    <div class="div-1">Div 1</div>
    <div class="div-2">Div 2</div>
    <div class="div-3">Div 3</div>
</div>