0

.colBlock {
  display: inline-block;
  /* Надо расположить в одну строку */
}

.red {
  width: 50px;
  height: 50px;
  background: red;
}

.blue {
  width: 50px;
  height: 50px;
  background: blue;
}

.brown {
  width: 50px;
  height: 50px;
  background: brown;
}

.orange {
  width: 50px;
  height: 50px;
  background: orange;
}

.black {
  width: 50px;
  height: 50px;
  background: black;
}

.grey {
  width: 50px;
  height: 50px;
  background: grey;
}

.yellow {
  width: 50px;
  height: 50px;
  background: yellow;
}

.white {
  width: 50px;
  height: 50px;
  background: white;
}

.green {
  width: 50px;
  height: 50px;
  background: green;
}
<dialog id="bgColor">
  <div class="colBlock">
    <div class="red">red</div>
    <div class="blue"></div>
    <div class="brown"></div><br>
    <div class="orange"></div>
    <div class="black"></div>
    <div class="grey"></div><br>
    <div class="yellow"></div>
    <div class="white"></div>
    <div class="green"></div><br>
  </div>
  <hr />
  <button class="closeButton" id="bgColClose" onclick="closeCondWind()">Закрыть</button>
</dialog>

Надо расположить эти блоки в одну строку , пробовал не выходит

3
  • пример почему не воспроизводится ? для родительского блока display:flex;
    – user33274
    Commented 13 июн. 2018 в 14:00
  • 1
    Нельзя менять display родительского элемета, потому что у <dialog> по умолчание display:none и если его поменять , то у меня будет этот блок будет показываться на странице без нажатия на кнопку
    – user299729
    Commented 13 июн. 2018 в 14:03
  • тогда для всех потомков float:left, я не про dialog говорю ..а о colblock
    – user33274
    Commented 13 июн. 2018 в 14:05

3 ответа 3

3

Один из вариантов flex. Еще существуют grid, можно даже float использовать....

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  background: #272727;
}

#bgColor {
  width: 100%;
  height: 100px;
}

.colBlock {
  width: 100%;
  height: 100%;
  display: flex;
}

.line {
  width: 50px;
  height: 50px;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.brown {
  background: brown;
}

.orange {
  background: orange;
}

.black {
  background: black;
}

.grey {
  background: grey;
}

.yellow {
  background: yellow;
}

.white {
  background: white;
}

.green {
  background: green;
}
<dialog id="bgColor" open>
  <div class="colBlock">
    <div class="line red">red</div>
    <div class="line blue">blue</div>
    <div class="line brown">brown</div><br>
    <div class="line orange">orange</div>
    <div class="line black">black</div>
    <div class="line grey">grey</div><br>
    <div class="line yellow">yellow</div>
    <div class="line white">white</div>
    <div class="line green">green</div><br>
  </div>
  <hr />
  <button class="closeButton" id="bgColClose" onclick="document.querySelector('dialog').close()">Закрыть</button>
</dialog>

5
  • 1
    а почему он не закрывается ?
    – user33274
    Commented 13 июн. 2018 в 15:25
  • Все прекрасно закрывается
    – Air
    Commented 13 июн. 2018 в 15:27
  • 1
    ни чего там не закрывается
    – user33274
    Commented 13 июн. 2018 в 15:29
  • ты видать с мазилы пробуешь
    – Air
    Commented 13 июн. 2018 в 15:32
  • 1
    ну да....с фокса ...гуглхром напичкали экспириментальными функциями из за чего теперь многие не могут отличить где правильно а где нет
    – user33274
    Commented 13 июн. 2018 в 15:34
0

Если я правильно понял, то так.

.colBlock div::before как фича :D

.colBlock {
  display: inline-block;
  /* Надо расположить в одну строку */
}

.red {
  width: 50px;
  height: 50px;
  background: red;
}

.blue {
  width: 50px;
  height: 50px;
  background: blue;
}

.brown {
  width: 50px;
  height: 50px;
  background: brown;
}

.orange {
  width: 50px;
  height: 50px;
  background: orange;
}

.black {
  width: 50px;
  height: 50px;
  background: black;
}

.grey {
  width: 50px;
  height: 50px;
  background: grey;
}

.yellow {
  width: 50px;
  height: 50px;
  background: yellow;
}

.white {
  width: 50px;
  height: 50px;
  background: white;
}

.green {
  width: 50px;
  height: 50px;
  background: green;
}

/* ----- */

.colBlock {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 5px;
}

.colBlock div {
    display: block;
    width: 100%;
    height: 50px;
}

.colBlock div::before {
    content: attr(class);
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-shadow: 0 0 1px #fff;
}
<div id="bgColor">
  <div class="colBlock">
    <div class="red">red</div>
    <div class="blue"></div>
    <div class="brown"></div>
    <div class="orange"></div>
    <div class="black"></div>
    <div class="grey"></div>
    <div class="yellow"></div>
    <div class="white"></div>
    <div class="green"></div>
  </div>
  <hr />
  <button class="closeButton" id="bgColClose" onclick="closeCondWind()">Закрыть</button>
</dialog>

1
  • 1
    И да, я б не стал использовать тег <dialog>, уж лучше <div> и js\jq.
    – De.Minov
    Commented 13 июн. 2018 в 23:18
-1

Этим всем блокам нужно дать display:inline-block. А не только родительскому.

Как-то так:

.colBlock > div {
    display: inline-block;  
}
1
  • А ещё float: left;, а ещё родителю ::after {content: ''; display: block; clear: both;}..
    – De.Minov
    Commented 13 июн. 2018 в 23:17

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.