Отображение двух делений рядом друг с другом с пробелом между ними с помощью CSS - PullRequest
Новая
       30

Отображение двух делений рядом друг с другом с пробелом между ними с помощью CSS

0 голосов
/ 13 мая 2019

Как я могу разместить два div рядом друг с другом, используя css.Я попробовал несколько вещей сам, но не уверен, где мои ошибки.Спасибо!

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>

Ответы [ 3 ]

1 голос
/ 14 мая 2019
  1. Для использования .row (https://getbootstrap.com/docs/4.3/layout/overview/#containers).
  2. col-md-3-offset не в bootstrap4 . Используйте .offset-md-3 вместо (https://getbootstrap.com/docs/4.3/layout/grid/#offsetting-columns).
  3. Я лично буду использовать систему сетки начальной загрузки в качестве структуры и настраивать элементы внутри. Я не стал бы писать собственные стили для существующих элементов 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>
0 голосов
/ 13 мая 2019

Я привык часто использовать таблицы. 

    <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, эти два элемента должны отображаться рядом. Надеюсь, что это помогает и ура!

0 голосов
/ 13 мая 2019

попробуйте использовать это, утвердите ответ, если поможет 

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