使用css显示两个相邻的div，中间有空格
Posted
技术标签:
【中文标题】使用css显示两个相邻的div，中间有空格【英文标题】：Displaying two divs next to each other with space in between using css 【发布时间】：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 文件。
【参考方案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>
.box1width: 400px; height: 400px; background-color: red; float: left;
.box2width: 400px; height: 400px; background-color: blue; float: left; margin-left: 50px;
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
【讨论】：
以上是关于使用css显示两个相邻的div，中间有空格的主要内容，如果未能解决你的问题，请参考以下文章