Вопросы Теги

Расположи в порядке grid с главным изображением

Возможно делать что-либо подобное ОДИНОКИМ с css, используя flexbox или какая-то другая идея и совсем в ТОМ ЖЕ DIV?

posibilidad flexbox

-3
задан 28.06.2019, 09:03
1 ответ

Flexbox не может делать то, что ты ищешь. Ты мог бы делать что-то похожим способствуя тому, чтобы первая статья заняла больше, но никогда он не будет точно в двойной порции в оставшуюся часть. Кроме которого не были бы плавающими элементы.

ты Можешь делать доказательства с flexbox: FlexyBoxex

Главный выбор - с системой grid (bootstrap или другой). Но это не значит, что ты не можешь делать это с твоим собственным CSS:

Идея - это достаточно основная, распределять общий класс для всех статей в том, который дает ему размер / цвет и общие стили: 

.bg-black {
    background-color: black;
    width: calc(20% - 20px);
    margin: 10px;
    height: 20vh;
    float:left;
}

Распределять ему div, которые - двойная порция размера класс, чтобы менять ему размер в двойную порцию: 

.double {
    width: calc(40% - 20px);
    height: calc(40vh + 20px);
}

Snipet 

.container {
  width: 100%;
}

.bg-black {
  background-color: black;
  width: calc(20% - 20px);
  margin: 10px;
  height: 20vh;
  float:left;
}

.double {
  width: calc(40% - 20px);
  height: calc(40vh + 20px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<div class="container">
  <div class="double bg-black col-4"></div>
  <div class="bg-black col-2"></div>
  <div class="bg-black col-2"></div>
  <div class="bg-black col-2"></div>

  <div class="bg-black col-2"></div>
  <div class="bg-black col-2"></div>
  <div class="bg-black col-2"></div>
  <div class="bg-black col-2"></div>
  <div class="bg-black col-2"></div>
  <div class="bg-black col-2"></div>
  <div class="bg-black col-2"></div>
  <div class="bg-black col-2"></div>
  <div class="bg-black col-2"></div>
  <div class="bg-black col-2"></div>
  <div class="bg-black col-2"></div>
  <div class="bg-black col-2"></div>
  <div class="bg-black col-2"></div>
</div>
1
ответ дан 04.09.2019, 07:49
  • 1
    Пожалуйста избеги отвечать вопросы, которые не показывают mí nimo я усиливаю со стороны OP. Ответь pregutnas хорошо формулируемые es.stackoverflow.com/help/how-to-answer – EMCode 28.06.2019, 19:52
  • 2
    Большое спасибо, уже ты не дал мне идею и также conocí в в FlexyBoxex. И дело не в том, что я не поместил минимального усилия, я думаю, что я был ясным, и из-за ответов я вижу, что они поняли меня. Но следующий раз я буду подробно описывать полностью. Я обнимаю и спасибо! – hkire 29.06.2019, 06:20
  • 3
    @EMCode Вопрос не será большого качества, но это что-то очень comú n думать, что flexbox ты можешь делать это. Поэтому дающий показания... Я посвящу мое усилие к тому, чтобы ответить вопросы, которые он считает уместными, и я пробую предотвращать этот тип вопросов, но эта я parecí которого спасали. – x3k_js 29.06.2019, 22:06

Теги

Похожие вопросы