Question

我无法弄清楚如何在div的每个角落放置四个菜单图标。任何人都可以帮助我吗？

Answer 1

查看下面的代码，了解如何设置此类布局。然后转到此jsfiddle以查看它的外观。基本上，您希望在相对定位的元素（您的父div）中使用绝对定位的元素（例如div来保存您的图标）。这样做可以让您明确指定子元素在父元素中的位置。您可以为每个元素指定top，left，right和bottom 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）。 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>

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

1 个答案: