使用css显示两个相邻的div，中间有空格答案

【问题标题】：Displaying two divs next to each other with space in between using css使用css显示两个相邻的div，中间有空格
【发布时间】：2019-09-30 16:28:24
【问题描述】：

如何使用 css 将两个 div 彼此相邻放置。我自己尝试了一些东西，但不确定我的错误在哪里。谢谢！

css:

.posts{
    display: flex;
    flex-direction: row;
}

.posts .col-md-6{
    padding-top: 14px;
    display: flex;
    flex-direction: column;
}

.posts .searchandlists{
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    /*float: right;*/
    /*padding-bottom: 14px;*/
}

.list-group{
    max-height: 300px;
    margin-bottom: 10px;
    overflow:scroll;
    -webkit-overflow-scrolling: touch;
}

html:

@extends('layouts.master')

@section('content')
    <section class="row posts">
        <div class="col-md-6 col-md-3-offset></div>
<div class="container searchandlists"></div>
</section>

【问题讨论】：

你在使用 Bootstrap 吗？ @extends 和 @section 不是 HTML。他们来自哪里？
是的，我正在使用引导程序。我正在使用@extend 和@section 组合一个主html 文件。

标签： html css laravel bootstrap-4 laravel-blade

【解决方案1】：

必须有一个.container 作为父级才能使用.row (https://getbootstrap.com/docs/4.3/layout/overview/#containers)。
col-md-3-offset 不在 bootstrap4 中。请改用.offset-md-3 (https://getbootstrap.com/docs/4.3/layout/grid/#offsetting-columns)。
我个人会使用bootstrap grid system作为结构，自定义里面的元素。我不会在现有的 bootstrap 元素上编写自定义样式，就像您在 .post .col-md-6 上所做的那样，除非您知道自己在做什么。

我更喜欢这样的布局：

<section class="posts">
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3"></div>
            <div class="col-md-3">
                <div class="searchandlists"></div>
            </div>
        </div>
    </div>
</section>

【讨论】：

【解决方案2】：

我已经养成了经常使用表格的习惯。

    <section class="row posts">
<tr>
<td><div class="col-md-6 col-md-3-offset></div></td>
<td><div class="container searchandlists"></div></td>
</tr>

即使有单独的 div 元素，这两个项目也应该并排显示。希望它有所帮助和欢呼！

【讨论】：

我建议避免使用表格，除非您正在显示数据。表格并不是用来定位 UI 元素的，它违背了使用基于网格的 CSS 系统的目的。

【解决方案3】：

尝试使用这个，如果有帮助，请批准答案

<html>
    <head>
    <meta charset="utf-8">
    <title>123</title>
        <style>
            .box1{width: 400px; height: 400px; background-color: red; float: left;}
            .box2{width: 400px; height: 400px; background-color: blue; float: left; margin-left: 50px;}

        </style>
    </head>

    <body>
        <div class="box1"></div>
        <div class="box2"></div>

    </body>
    </html>

【讨论】：