1. 首页
  2. 问答
  3. div内div的相对位置

div内div的相对位置

2017-05-03 119 views
2

我在CSS3中设计了一个标志。div内div的相对位置

我做了一个类.logo具有特定的高度和宽度。其他div里面的.logo类将调整其相对于父母div的位置。

这是我的CSS代码。

.logo { 
 
    width: 200px; 
 
    height: 200px; 
 
    position: fixed; 
 
} 
 
.logo .vertical-left { 
 
    width: 25px; 
 
    height: 60%; 
 
    position: absolute; 
 
    bottom: 0; 
 
    background-color: #09aaba; 
 
} 
 
.logo .vertical-right { 
 
    width: 25px; 
 
    height: 65%; 
 
    background-color: #09aaba; 
 
    margin-left: 60%; 
 
    top: 0; 
 
    position: absolute; 
 
} 
 
.logo .vertical-right2 { 
 
    width: 25px; 
 
    height: 60%; 
 
    background-color: #ba1dd4; 
 
    margin-left: 60%; 
 
    top: 0; 
 
    position: absolute; 
 
} 
 
.logo .horizontal-top { 
 
    width: 100%; 
 
    height: 25px; 
 
    background-color: #09aaba; 
 
    position: absolute; 
 
    top: 30%; 
 
    border-radius: 10px 0; 
 
} 
 
.logo .horizontal-top2 { 
 
    width: 60%; 
 
    height: 25px; 
 
    background-color: #ba1dd4; 
 
    position: absolute; 
 
    top: 30%; 
 
    right: 0; 
 
} 
 
.logo .horizontal-bottom { 
 
    width: 72.5%; 
 
    height: 25px; 
 
    background-color: #09aaba; 
 
    position: absolute; 
 
    top: 65%; 
 
    border-radius: 10px 0; 
 
} 
 

 
/* triangle */ 
 
.logo .arrow-left { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 12px solid transparent; 
 
    border-bottom: 12px solid transparent; 
 
    position: absolute; 
 
    top: 30%; 
 
    left: 35%; 
 
    border-right:10px solid #ba1dd4; 
 
} 
 
.logo .arrow-down { 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 12px solid transparent; 
 
    border-right: 13px solid transparent; 
 
    position: absolute; 
 
    top: 60%; 
 
    right: 27%; 
 
    border-top: 10px solid #ba1dd4; 
 
}
<div class="logo"> 
 
     <div class="vertical-left"></div> 
 
     <div class="vertical-right"></div> 
 
     <div class="vertical-right2"></div> 
 
     <div class="horizontal-top"></div> 
 
     <div class="horizontal-top2"></div> 
 
     <div class="horizontal-bottom"></div> 
 
     <div class="arrow-left"></div> 
 
     <div class="arrow-down"></div> 
 
    </div>

这里.logo格大小为200像素X 200像素。当我将其更改为300px X 300px内部div被搞乱了，如下面的代码片段所示。

.logo { 
 
    width: 300px; 
 
    height: 300px; 
 
    position: fixed; 
 
} 
 

 
.logo .vertical-left { 
 
    width: 25px; 
 
    height: 60%; 
 
    position: absolute; 
 
    bottom: 0; 
 
    background-color: #09aaba; 
 
} 
 

 
.logo .vertical-right { 
 
    width: 25px; 
 
    height: 65%; 
 
    background-color: #09aaba; 
 
    margin-left: 60%; 
 
    top: 0; 
 
    position: absolute; 
 
} 
 

 
.logo .vertical-right2 { 
 
    width: 25px; 
 
    height: 60%; 
 
    background-color: #ba1dd4; 
 
    margin-left: 60%; 
 
    top: 0; 
 
    position: absolute; 
 
} 
 

 
.logo .horizontal-top { 
 
    width: 100%; 
 
    height: 25px; 
 
    background-color: #09aaba; 
 
    position: absolute; 
 
    top: 30%; 
 
    border-radius: 10px 0; 
 
} 
 

 
.logo .horizontal-top2 { 
 
    width: 60%; 
 
    height: 25px; 
 
    background-color: #ba1dd4; 
 
    position: absolute; 
 
    top: 30%; 
 
    right: 0; 
 
} 
 

 
.logo .horizontal-bottom { 
 
    width: 72.5%; 
 
    height: 25px; 
 
    background-color: #09aaba; 
 
    position: absolute; 
 
    top: 65%; 
 
    border-radius: 10px 0; 
 
} 
 

 

 
/* triangle */ 
 

 
.logo .arrow-left { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 12px solid transparent; 
 
    border-bottom: 12px solid transparent; 
 
    position: absolute; 
 
    top: 30%; 
 
    left: 35%; 
 
    border-right: 10px solid #ba1dd4; 
 
} 
 

 
.logo .arrow-down { 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 12px solid transparent; 
 
    border-right: 13px solid transparent; 
 
    position: absolute; 
 
    top: 60%; 
 
    right: 27%; 
 
    border-top: 10px solid #ba1dd4; 
 
}
<div class="logo"> 
 
    <div class="vertical-left"></div> 
 
    <div class="vertical-right"></div> 
 
    <div class="vertical-right2"></div> 
 
    <div class="horizontal-top"></div> 
 
    <div class="horizontal-top2"></div> 
 
    <div class="horizontal-bottom"></div> 
 
    <div class="arrow-left"></div> 
 
    <div class="arrow-down"></div> 
 
</div>

怎样才可以有一个负责任的标志，这将根据家长的高度和宽度调整？

来源

2017-05-03 Anuj TBE

+4

为什么不把它作为一个图像或SVG？只是似乎过于复杂的东西没有理由 – Pete

+1

如果你改变的大小，它也会改变百分比......这通常会形成一个图像（PNG或SVG） –

+0

我熟悉SVG图像，但有许多标志建立使用CSS。即使字体真棒图标也是使用CSS构建的。感谢您的建议，但我只想用CSS解决方案。 –

回答

0

将尺寸设置为百分比应使其调整大小。但是尖锐的箭头提示不会因为它们不能设置为百分比。下面的代码会使徽标重新调整大小，但您会发现箭头在某个时刻切断了。希望这让你在正确的方向

.logo { 
 
    width: 300px; 
 
    height: 300px; 
 
    position: fixed; 
 
} 
 
.logo:nth-child(2) { 
 
    width: 100px; 
 
    height: 100px; 
 
    position: absolute; 
 
    right: 0; 
 
} 
 
.logo .vertical-left { 
 
    width: 12.5%; 
 
    height: 60%; 
 
    position: absolute; 
 
    bottom: 0; 
 
    background-color: #09aaba; 
 
} 
 
.logo .vertical-right { 
 
    width: 12.5%; 
 
    height: 65%; 
 
    background-color: #09aaba; 
 
    margin-left: 60%; 
 
    top: 0; 
 
    position: absolute; 
 
} 
 
.logo .vertical-right2 { 
 
    width: 12.5%; 
 
    height: 60%; 
 
    background-color: #ba1dd4; 
 
    margin-left: 60%; 
 
    top: 0; 
 
    position: absolute; 
 
    display: flex; 
 
    justify-content: center ; 
 
    align-items: flex-end; 
 
} 
 
.logo .horizontal-top { 
 
    width: 100%; 
 
    height: 12.5%; 
 
    background-color: #09aaba; 
 
    position: absolute; 
 
    top: 30%; 
 
    border-radius: 10px 0; 
 
} 
 
.logo .horizontal-top2 { 
 
    width: 60%; 
 
    height: 12.5%; 
 
    background-color: #ba1dd4; 
 
    position: absolute; 
 
    top: 30%; 
 
    right: 0; 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
} 
 
.logo .horizontal-bottom { 
 
    width: 72.5%; 
 
    height: 12.5%; 
 
    background-color: #09aaba; 
 
    position: absolute; 
 
    top: 65%; 
 
    border-radius: 10px 0; 
 
} 
 

 
/* triangle */ 
 
.logo .arrow-left { 
 

 
} 
 
.logo .arrow-down { 
 
    
 
} 
 
.vertical-right2:after { 
 
    content: ''; 
 
    width: 100%; 
 
    height: 0; 
 
    border-left: 12px solid transparent; 
 
    border-right: 13px solid transparent; 
 
    position: relative; 
 
    bottom: -10px; 
 
    border-top: 10px solid #ba1dd4; 
 
    z-index: 100; 
 
} 
 
.horizontal-top2:before { 
 
    content: ''; 
 
    width: 0; 
 
    border-top: 12px solid transparent; 
 
    border-bottom: 12px solid transparent; 
 
    position: relative; 
 
    border-right: 10px solid #ba1dd4; 
 
    left: -10px; 
 
    flex-grow: 1; 
 
    z-index: 100; 
 
    }
<div class="logo"> 
 
     <div class="vertical-left"></div> 
 
     <div class="vertical-right"></div> 
 
     <div class="vertical-right2"></div> 
 
     <div class="horizontal-top"></div> 
 
     <div class="horizontal-top2"></div> 
 
     <div class="horizontal-bottom"></div> 
 
     <div class="arrow-left"></div> 
 
     <div class="arrow-down"></div> 
 
    </div> 
 
<div class="logo"> 
 
     <div class="vertical-left"></div> 
 
     <div class="vertical-right"></div> 
 
     <div class="vertical-right2"></div> 
 
     <div class="horizontal-top"></div> 
 
     <div class="horizontal-top2"></div> 
 
     <div class="horizontal-bottom"></div> 
 
     <div class="arrow-left"></div> 
 
     <div class="arrow-down"></div> 
 
    </div>

来源

2017-05-03 16:19:58 blecaf

-3

完成你想要做的事情的一个完美方式是去找一个SVG标志。

SVG可以调整大小而不中断，并且是quite powerful。

This tutorial可以帮助您开始。

来源

2017-05-03 14:51:27

0

我已经优化了你的CSS位：

.logo .vertical-right { 
    width: 25px; 
    height: calc(65% - 25px); 
    background-color: #09aaba; 
    margin-left: 60%; 
    bottom: calc(27% + 25px); 
    position: absolute; 
} 
.logo .vertical-right2 { 
    width: 25px; 
    height: 60%; 
    background-color: #ba1dd4; 
    margin-left: 60%; 
    bottom: 40%; 
    position: absolute; 
} 
.logo .horizontal-top { 
    width: 100%; 
    height: 25px; 
    background-color: #09aaba; 
    position: absolute; 
    bottom: 60%; 
    border-radius: 10px 0; 
} 
.logo .horizontal-top2 { 
    width: 60%; 
    height: 25px; 
    background-color: #ba1dd4; 
    position: absolute; 
    bottom: 60%; 
    right: 0; 
} 
.logo .horizontal-bottom { 
    width: calc(60% + 25px); 
    height: 25px; 
    background-color: #09aaba; 
    position: absolute; 
    bottom: 27%; 
    border-radius: 10px 0; 
} 

/* triangle */ 
.logo .arrow-left { 
    width: 0; 
    height: 0; 
    border-top: 12px solid transparent; 
    border-bottom: 12px solid transparent; 
    position: absolute; 
    bottom: 60%; 
    right: 60%; 
    border-right: 10px solid #ba1dd4; 
} 
.logo .arrow-down { 
    width: 0; 
    height: 0; 
    border-left: 12px solid transparent; 
    border-right: 13px solid transparent; 
    position: absolute; 
    top: 60%; 
    margin-left: 60%; 
    border-top: 10px solid #ba1dd4; 
}

首先，我与其他海报同意在这里，图像听起来更像是应该在这种情况下习惯。然而，这并没有真正回答这个问题。这只是方便的建议。

随着你试图让你的元素在你的容器中使用一个共同的“原点”的定位。换句话说，总是尝试从相同的边缘对齐它们。在顶部，右侧，左侧和底部之前，你有一点混合。我已经使得彼此尊重的元素使用相同的边来计算距离。我还添加了几个CSS计算功能，如这个height: calc(65% - 25px);，因为您主要将百分比元素与几个基于静态像素的测量进行混合。

来源

2017-05-03 15:51:07 Culyx

相关问题

 相关问题