CSS переставляет div в квадрате

Question

CSS переставляет div в квадрате

0

В моем приложении angular2 у меня есть div следующим образом:

<div align="center">
   <div class="box {{box.color}}" ng-repeat="box in boxes" ng-class="{'lit': box.isLit}" ng-click="boxClick(box.id)"></div>
   <button class="button button-dark" ng-click="start()">Start</button>
</div>

Это выглядит следующим образом на моем экране:

Соответствующий CSS:

.box {
    height: 50px;
    width: 50px;
    border: 1px solid black;
    margin: 10px;
}

.green {
    background-color: green;
    opacity: 0.3;
}

.blue {
    background-color: blue;
    opacity: 0.3;
}

.red {
    background-color: red;
    opacity: 0.3;
}

.yellow {
    background-color: yellow;
    opacity: 0.3;
}

Я не очень хорошо разбираюсь в CSS. Я хочу устроить эти квадратики одинаково, т.е. Две коробки рядом друг с другом, а две другие - как четыре квадрата.

Как я могу это достичь?

Nitish 27 июль 2016, в 10:36

Источник

Теги:

html

angularjs

css

3 ответа

2

Если вы оставите все слева и затем очистите каждые 2n + 1 ребенка, вы сможете уложить их в 2s без необходимости устанавливать какие-либо явные значения пикселей:

.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  overflow: hidden; /* this is so you parent box keeps its dimensions */
}
.box {
  height: 50px;
  width: 50px;
  border: 1px solid black;
  margin: 10px;
  float: left; /* add this to get all boxes onto the same line */
}
button {
  float: left; /* this is so button goes below and not to right of boxes */
}
button,
.box:nth-child(2n + 1) {
  clear: left;   /* add this to make 2 boxes per row and get button on it own line */
}
.green {
  background-color: green;
  opacity: 0.3;
}
.blue {
  background-color: blue;
  opacity: 0.3;
}
.red {
  background-color: red;
  opacity: 0.3;
}
.yellow {
  background-color: yellow;
  opacity: 0.3;
}

<div class="clearfix">
  <div class="box green"></div>
  <div class="box blue"></div>
  <div class="box red"></div>
  <div class="box yellow"></div>
  <button class="button button-dark" ng-click="start()">Start</button>
</div>

Дополнительная информация о плавании и очистке

Pete 27 июль 2016, в 05:58

1

Добавьте атрибут ng-if в div как следующий, я надеюсь, что это вам поможет.

<div class="box {{box.color}}" ng-repeat="box in boxes" ng-class="{'lit': box.isLit}" ng-click="boxClick(box.id)" ng-if="$index % 2 == 0"></div>
<div class="box {{box.color}}" ng-repeat="box in boxes" ng-class="{'lit': box.isLit}" ng-click="boxClick(box.id)" ng-if="$index % 2!= 0" class="row"></div>

Nitin Dhomse 27 июль 2016, в 06:21

0

Нет, это сняло две коробки, я хочу всего 4 коробки, но две сверху и две ниже.
Thinker 27 июль 2016, в 08:29
0

@Nitish Я понял вашу проблему, попробуйте с $ index% 2! = 0
Nitin Dhomse 27 июль 2016, в 08:30
0

Это сохранило две другие коробки!
Thinker 27 июль 2016, в 08:33
0

@Nitish Ооо ... понял, я изменил свой ответ, просто попробуйте один раз
Nitin Dhomse 27 июль 2016, в 08:40
0

Да, это сработало! однако ответ, который я принял, кажется простым вариантом. Просто манипулируя css. Спасибо вам большое!
Thinker 27 июль 2016, в 08:48

Показать ещё 3 комментария

Ещё вопросы

Нет, это сняло две коробки, я хочу всего 4 коробки, но две сверху и две ниже.
@Nitish Я понял вашу проблему, попробуйте с $ index% 2! = 0
Это сохранило две другие коробки!
@Nitish Ооо ... понял, я изменил свой ответ, просто попробуйте один раз
Да, это сработало! однако ответ, который я принял, кажется простым вариантом. Просто манипулируя css. Спасибо вам большое!

Justinas · Accepted Answer · 2016-07-27T06-08-00.000Z

Вам нужно float: left свои поля и применил соответствующую ширину к вашей коробке (если вам нужно 2 коробки на строку, чем ширина обложки 2 * (ширина окна) + дополнение + маржа)

.wrapper {
  width: 200px;
}
.box {
  height: 50px;
  width: 50px;
  border: 1px solid black;
  margin: 10px;
  float: left;
}
.green {
  background-color: green;
  opacity: 0.3;
}
.blue {
  background-color: blue;
  opacity: 0.3;
}
.red {
  background-color: red;
  opacity: 0.3;
}
.yellow {
  background-color: yellow;
  opacity: 0.3;
}

<div class="wrapper">
  <div class="box green"></div>
  <div class="box blue"></div>
  <div class="box red"></div>
  <div class="box yellow"></div>
</div>

Вы также должны добавить границу к этому вычислению ширины оболочки