Значки меню в верхнем левом/правом и нижнем/левом правом углу

Question

У меня возникли проблемы с установкой четырех значков меню в каждом углу div. Может кто-нибудь мне помочь?

Answer 1

Ознакомьтесь с кодом ниже, чтобы узнать, как настроить этот тип макета. Затем перейдите к этому jsfiddle, чтобы посмотреть, как он выглядит. В принципе, вы хотите использовать абсолютно позиционированные элементы (например, divs для хранения ваших значков) внутри элемента (вашего родительского div), который относительно позиционируется. Это позволяет явно указывать, где дочерние элементы будут расположены внутри родителя. Вы указываете свойства верхнего, левого, правого и нижнего CSS для каждого элемента.

Первый класс css ниже говорит, что любой элемент DIV с классом снаружи должен быть оформлен с этими настройками. Остальные работают одинаково.

CSS-:

div.outside 
{ 
    border: 1px solid black;  
    width: 200px; 
    height: 200px; 
    margin: 5px; 
    position: relative; 
} 

div.topLeft 
{ 
    border: 1px solid red;  
    width: 50px; 
    height: 50px; 
    position: absolute; 
    top: 10px; 
    left: 10px; 
} 

div.bottomRight 
{ 
    border: 1px solid green;  
    width: 50px; 
    height: 50px; 
    position: absolute;  
    bottom: 10px; 
    right: 10px; 
} 

div.topRight 
{ 
    border: 1px solid blue;  
    width: 50px; 
    height: 50px; 
    position: absolute; 
    top: 10px; 
    right: 10px; 
} 

div.bottomLeft 
{ 
    border: 1px solid yellow;  
    width: 50px; 
    height: 50px; 
    position: absolute; 
    bottom: 10px; 
    left: 10px; 
} 

В HTML ниже DIV с классом снаружи является контейнером. Внутри DIV будут размещаться ваши значки (где у меня есть TL, BR, TR и BL).

<div class="outside">  
    <div class="topLeft">TL</div> 
    <div class="bottomRight">BR</div> 
    <div class="topRight">TR</div> 
    <div class="bottomLeft">BL</div> 
</div>