左上/右下角和右下角/左下角的菜单图标

Question

我无法弄清楚如何在 div 的每个角落放置四个菜单图标。谁能帮帮我？

Answer 1

查看下面的代码，了解如何设置此类布局。然后前往jsfiddle 看看它的外观。基本上，您希望在相对定位的元素（您的父 div）中使用绝对定位的元素（例如 div 来保存您的图标）。这样做可以让您明确指定子元素在父元素中的位置。您为每个元素指定顶部、左侧、右侧和底部 css 属性。

下面的第一个 css 类表示任何具有 outside 类的 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）。 HTML：

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