ДИВ размещения блока в HTML/CSS

Я сделал это демо: https://jsfiddle.net/qtpsqchq/1/ДИВ размещения блока в HTML/CSS

Код сниппета:

#dashboardHeader { 
 
    color: white; 
 
    background-color: #42637B; 
 
    border: 1px solid black; 
 
} 
 
#dashboardTabs { 
 
    margin: 0 auto; 
 
    width: 50%; 
 
} 
 
.dashboardTab { 
 
    color: white; 
 
    background-color: #39556A; 
 
    border: 1px solid black; 
 
    padding-left: 25px; 
 
    padding-right: 25px; 
 
    margin: 3px; 
 
    float: left; 
 
}

<body> 
 
    <title>Dashboard</title> 
 

 
    <div id="dashboardBox"> 
 

 
    <div id="dashboardHeader"> 
 
     <h1 align="center">Dashboard</h1> 
 
    </div> 
 

 
    <div id="dashboardTabs"> 
 
     <div class="dashboardTab"> 
 
     <h3>1</h3> 
 
     </div> 
 
     <div class="dashboardTab"> 
 
     <h3>2eq</h3> 
 
     </div> 
 
     <div class="dashboardTab"> 
 
     <h3>3</h3> 
 
     </div> 
 
    </div> 
 

 
    <div id="dashboardContent"> 
 

 
    </div> 
 

 
    </div> 
 

 
</body>

То, что я хочу, чтобы получить этот результат: http://s4.postimg.org/x6p45agq4/maquette.jpg

Но блок не центрирован, как я хочу, чтобы они были, 3 квадрата должны быть центрированы.

Другая странная вещь. Если я поместил границу вокруг «dashboardTabs», граница не будет проходить вокруг группы «dashboardTab» (обратите внимание, что я написал «dashboardTabs» и «dashboardTab»).

Почему?

Спасибо.

источник

2015-11-24 Eildosa

Решение Flexbox, которое также требует удаления поплавков.

#dashboardHeader { 
 
    color: white; 
 
    background-color: #42637B; 
 
    border: 1px solid black; 
 
} 
 
#dashboardTabs { 
 
    margin: 0 auto; 
 
    width: 50%; 
 
    display: flex; 
 
    justify-content: center; 
 
    border:2px solid green; 
 
} 
 
.dashboardTab { 
 
    color: white; 
 
    background-color: #39556A; 
 
    border: 3px solid red; 
 
    padding-left: 25px; 
 
    padding-right: 25px; 
 
    margin: 3px; 
 
}

<body> 
 
    <title>Dashboard</title> 
 

 
    <div id="dashboardBox"> 
 

 
    <div id="dashboardHeader"> 
 
     <h1 align="center">Dashboard</h1> 
 
    </div> 
 

 
    <div id="dashboardTabs"> 
 
     <div class="dashboardTab"> 
 
     <h3>1</h3> 
 
     </div> 
 
     <div class="dashboardTab"> 
 
     <h3>2</h3> 
 
     </div> 
 
     <div class="dashboardTab"> 
 
     <h3>3</h3> 
 
     </div> 
 
    </div> 
 

 
    <div id="dashboardContent"> 
 

 
    </div> 
 

 
    </div> 
 

 
</body>

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

источник

2015-11-24 13:24:07

ничего себе, только погуглил, flexbox is awesome – Eildosa

Вы можете использовать текст выравнивать центр на оберточной DIV и установите вкладку дивы, как встроенный блок элементов, как это:

https://jsfiddle.net/qtpsqchq/3/

#dashboardTabs {  
     width:100%; 
     text-align:center; 
} 

.dashboardTab { 
    display:inline-block; 
}

С этим, граница будет появляться, потому что мы удалили свойство float.

источник

2015-11-24 13:16:39 Frankey

ДИВ размещения блока в HTML/CSS

ответ

Смежные вопросы