Question

如何使用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>

Answer 1

在使用.container（https://getbootstrap.com/docs/4.3/layout/overview/#containers）之前，必须有一个.row作为父母。
col-md-3-offset不在 bootstrap4 中。改用.offset-md-3（https://getbootstrap.com/docs/4.3/layout/grid/#offsetting-columns）。
我将亲自使用引导网格系统作为结构并自定义其中的元素。除非您知道自己在做什么，否则我不会像在.post .col-md-6上那样在现有的 bootstrap 元素上编写自定义样式。

我更喜欢这样的布局：

<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>

Answer 2

尝试使用此方法，如果有帮助，请批准答案

<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>

Answer 3

我已经习惯了很多使用表的习惯。

    <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元素，这两个项目也应并排显示。希望它能帮助和欢呼！

使用css显示两个div并排显示

3 个答案: