Сделать квадрат div в CSS

-2

Как сделать те боковые divs похожими на маленькую коробку или квадрат? Я установил ширину и высоту #header, и на них она не работает.Сделать квадрат div в CSS

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
     <title>A Page</title> 
     <link type="text/css" rel="stylesheet" href="css/main.css" /> 
     <!-- GOOGLE FONTS --> 
      <link href="https://fonts.googleapis.com/css?family=Prompt" rel="stylesheet" /> 


    </head> 
    <body> 
     <div id="header"> 
      <div id="search"> 
       <form> 
        <div id="box" class="text"> 
         <input type="text" placeholder="Search" /> 
        </div> 
        <div id="box" class="small"> 
         <input type="image" src="" alt="submit" /> 
        </div> 
       </form> 
      </div> 

      <div id="menu"> 
       <a href=""><div id="box" class="big"></div></a> 
       <a><div id="box" class="small"><img></img></div></a> 
       <a><div id="box" class="small"><img></img></div></a> 
       <span id="notifications"></span> 
      </div> 
     </div> 

     <br /> 

     <div id="box" class="big"> 

     </div>

CSS:

body{ 
    font-family: 'Prompt', sans-serif; 
    background: #707070; 
} 

#header{ 
    background: #e2ecf2; 
    opacity: 0.87; 
    border-radius: 30px; 
    height: 60px; 
    width: 1000px; 
    position: fixed; 
    left: 50%; 
    top: 25px; 
    transform: translateX(-50%); 
} 

#box{ 
    outline: 3px; 
    outline-style: solid; 
    outline-color: #d7d7d7; 
} 

#box .small{ 
    width: 35px; 
    height: 35px; 
} 

#box .big{ 
    width: 50px; 
    height: 50px; 
} 

#header #search{ 
    margin-left: 37px; 
} 

#header #search input{ 
    float: left; 
    margin-left: 20px; 
}

источник

2016-06-26 Alex Vasile

Существует много изменений. Вы должны проверить http://www.w3schools.com/ и Youtube/Google. Тогда вы сможете задать ясный вопрос и помочь нам помочь. Счастливое кодирование! –

Про отправляющий отзыв: пожалуйста, не просите о помощи. – halfer

В вашем CSS вы определили стиль

#box .small

Этот стиль применяется к элементу в пределах #box, который имеет класс "малый" - например, например:

<div id="box"><span class="small"></span></div>

удалить пространство между ними и будет применяться к элементу #box с классом «малым»

#box.small

Хорошим инструментом, чтобы увидеть, что случилось это консоль разработчика в вашем браузере. Это должно показать вам, какие стили применяются к элементу во время выполнения.

Также имейте в виду, что идентификаторы могут использоваться так, как вы, но я бы не рекомендовал использовать один и тот же идентификатор несколько раз, так как он должен быть уникальным в идеале. Вместо этого вы можете использовать другой класс и применить этот стиль следующим образом:

div.box.small

источник

2016-06-26 08:37:57 elfwyn

Сделать квадрат div в CSS

ответ

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