создайте столбец из прямоугольников в центре фонового прямоугольника

ProgramBox

создайте столбец из прямоугольников в центре фонового прямоугольника

Post author:admin
Запись опубликована:18 апреля, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css — файл

Вопрос:

Я хочу создать ряд полей, выровненных по центру фонового прямоугольника, вот так:

Обратите внимание, что у нас может быть более двух блоков или только один.

создание столбца полей не должно быть сложной задачей, но проблема в том, что вы хотите, чтобы эти отступы были выше и ниже фонового прямоугольника (по крайней мере, для меня) усложняются.

Я могу вычислить все это с помощью javascript, но мне интересно, есть ли решение с использованием чистого CSS.

Вот Codepen и код:

 body {
  background-color: #FDFDFD;
  overflow: hidden;
}

.subbox-container {
  display: flex;
  flex-direction: column;
  gap: 0.195vw;
  min-width: 0;
}

.main-container {
  width: 100%;
  height: 98vh;
  gap: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  align-content: center;
  min-width: 0; 
  margin: 0 auto;
  border: 1px dashed;
}

.background-rectangle {
  left: 0;
  top: 0;
  margin-right: 0 !important;
  min-width: 0; 
}

.box-container {
  position: relative;
  top: 0;
  min-width: 0;
}

* { min-width: 0; }

.box, .background-rectangle {
  max-width: 100%;
}

.background-rectangle {
  background-color: #E6E0EC;
  border-radius: 10px;
}

.box{
  background-color: coral;
}

 <div class="main-container">

    <!-- box-container start -->

    <div id="box-container-1" class="box-container">

    <div class="subbox-container">

        <!-- Start Box -->
        <div class ="box" style="min-width: 0; margin: 0; z-index: 4; width: 15.54vw; height: 5.59vh; opacity: 1;">
        </div>
        <!-- End Box -->


        <!-- Start Box -->
        <div class ="box" style="min-width: 0; margin: 0; z-index: 4; width: 15.54vw; height: 5.59vh; opacity: 1;" aria-label="do you ever">
        </div>
        <!-- End Box -->

    </div>

    <!-- background rectangle -->
    <div class="background-rectangle" style="min-width: 0; height: 16.81vh; width: 15.54vw;">
    </div>

    <!-- box-container end -->

</div> <!-- main container end-->

Ответ №1:

Пожалуйста, удалите из вашего html и добавьте класс background-rectangle во вложенный блок-контейнер

 <div class="background-rectangle" style="min-width: 0; height: 16.81vh; width: 15.54vw;">
</div>

если вы добавите непрозрачность к цвету фона, а затем преобразуете в rgb добавленное последнее значение в виде непрозрачности #E6E0EC (rgb(230 224 236)) и значения 0,7 в rgb
background-color: #E6E0EC для background-color:rgb(230,224,236,0.7);

И добавьте этот стиль к subbox-container

   min-width: 0;
  height: 16.81vh;
  width: 15.54vw;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;

 body {
  background-color: #FDFDFD;
  overflow: hidden;
}

.subbox-container {
  display: flex;
  flex-direction: column;
  gap: 0.195vw;
  min-width: 0;
  min-width: 0;
  height: 16.81vh;
  width: 15.54vw;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-container {
  width: 100%;
  height: 98vh;
  gap: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  align-content: center;
  min-width: 0; 
  margin: 0 auto;
  border: 1px dashed;
}

.background-rectangle {
  left: 0;
  top: 0;
  margin-right: 0 !important;
  min-width: 0;
}

.box-container {
  position: relative;
  top: 0;
  min-width: 0;
}

* { min-width: 0; }

.box, .background-rectangle {
  max-width: 100%;
}

.background-rectangle {
  background-color: rgb(230,224,236,0.7);
  border-radius: 10px;
}

.box{
  background-color: coral;
}

 <div class="main-container">

    <!-- box-container start -->

    <div id="box-container-1" class="box-container">

    <div class="subbox-container background-rectangle">

        <!-- Start Box -->
        <div class ="box" style="min-width: 0; margin: 0; z-index: 4; width: 15.54vw; height: 5.59vh; opacity: 1;">
        </div>
        <!-- End Box -->


        <!-- Start Box -->
        <div class ="box" style="min-width: 0; margin: 0; z-index: 4; width: 15.54vw; height: 5.59vh; opacity: 1;" aria-label="do you ever">
        </div>
        <!-- End Box -->

    </div>


    <!-- box-container end -->

</div> <!-- main container end-->

Подробнее о flexbox: Выравнивание элементов в гибком контейнере

1. Мне нужна непрозрачность: 0.07; для фонового прямоугольника!

2.ok @Pixier если вы добавите непрозрачность, чтобы background-color затем преобразовать в rgb добавленное последнее значение. #E6E0EC в значении rgb rgb(230,224,236) добавьте непрозрачность 0.7 в значении rgb, чтобы преобразовать шестнадцатеричное значение в rgb: rgbtohex.net/hextorgb background-color: #E6E0EC для background-color:rgb(230,224,236,0.7);

Ответ №2:

Я думаю, что, возможно, я правильно понял, что это ваша конечная цель:

https://codepen.io/liam88/pen/RwarzvO

Я упростил необходимые элементы.

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

Элементы в объемном изображении всегда будут располагаться по центру, поскольку мы используем flexbox со свойствами «выровнять» и «выровнять».

Если я пропустил цель, дайте мне знать.

     <div class="main-container">

    <!-- box-container start -->
  <div class="flex surround">
    <!-- each box under -->
    <div class="flex-item box">
    </div>
    <div class="flex-item box">
    </div>
  </div>
</div> <!-- main container end-->

body {
  background-color: #FDFDFD;
  overflow: hidden;
}
.main-container {
  width: 100%;
  height: 98vh;
  gap: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  align-content: center;
  min-width: 0; 
  margin: 0 auto;
  border: 1px dashed;
  background:lightblue;
}
.flex {
  display: flex;
  flex-direction: column;
  gap: 0.195vw;
  justify-content:center;
  align-items:center;
}
.surround{
  width:50%; /* width set to view easily */
  background:lightgrey;
  border-radius:10px;
  padding:20px 0;
}
.box{
  width:100%;
  height:100%;
  min-height:50px;
  background:coral;
}

1. Спасибо за отличный ответ .. плюс один … Я протестирую это в своем коде и вернусь к вам…

2. Мне нужен opacity: 0.07; для фонового прямоугольника!

3. @Pixier Я настроил codepen, чтобы включить фон, использующий RGBA. Это позволяет использовать последнее правило для настройки непрозрачности. В настоящее время он равен 0.7. Чем ближе к 0, тем прозрачнее, чем ближе к 1, тем меньше прозрачность.

Ответ №3:

привет, я внес некоторые обновления в ваш код, я прокомментировал старые html и css.

здесь вы можете найти упрощенную версию с меньшим количеством css:

версия codepen

 body {
  background-color: #FDFDFD;
  overflow: hidden;
}

.subbox-container {
  display: flex;
  flex-direction: column;
  gap: 0.195vw;
  min-width: 0;
}

.main-container {
  width: 100%;
  height: 98vh;
  gap: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  align-content: center;
  min-width: 0; 
  margin: 0 auto;
  border: 1px dashed;
}

.background-rectangle {
  /*left: 0;
  top: 0;
  margin-right: 0 !important;
  min-width: 0;*/ 
}

.box-container {
  /*position: relative;
  top: 0;
  min-width: 0;*/
}

* { min-width: 0; }

.box, .background-rectangle {
  max-width: 100%;
}

.background-rectangle {
  background-color: #E6E0EC;
  border-radius: 10px;
  padding: 20px 2px;
}

.box{
  background-color: coral;
  
}

 <div class="main-container">

    <!-- box-container start -->

    <div id="box-container-1" class="box-container">

    <div class="subbox-container background-rectangle">

        <!-- Start Box -->
        <div class ="box" style="min-width: 0; margin: 0; z-index: 4; width: 15.54vw; height: 5.59vh; opacity: 1;">
        </div>
        <!-- End Box -->


        <!-- Start Box -->
        <div class ="box" style="min-width: 0; margin: 0; z-index: 4; width: 15.54vw; height: 5.59vh; opacity: 1;" aria-label="do you ever">
        </div>
        <!-- End Box -->

    </div>

    <!-- background rectangle 
    <div class="background-rectangle" style="min-width: 0; height: 16.81vh; width: 15.54vw;">
    </div>-->

    <!-- box-container end -->

</div> <!-- main container end-->