Question

我创建了一个这样的个人资料对话框：

<div style="background-color: white;
            color: black;
            border-radius: 2px; 
            position: absolute; 
            top: 52px; 
            right: 10px; 
            padding: 2px">
  <div style="width: 0;
              height: 0;
              border-style: solid;
              border-width: 0 10px 15px 10px;
              border-color: transparent transparent #ffffff transparent;
              position: relative;
              top: -10px;
              right: -165px">
  </div>
</div>

我想将儿童小三角形div总是远离父div的右端10-20px。如何制作第二个小三角形div从父div的末尾开始占据它的起始位置？

Answer 1

只需填写父级别relative和孩子的位置absolute即可你的例子中有这样的东西：

<div style="background-color: black;color: black;border-radius: 2px; position: relative;  padding: 2px ; width:1000; height:1000;">
  <div style="
  position: absolute;
  width: 200;
              height: 200;
              border-style: solid;                
              border-color: transparent transparent #ffffff transparent;                  
              top: 10px;
              right: 16px;
              background-color: blue">
   </div>

Answer 2

内部DIV的宽度为20px（左边框+右边框）。为外部DIV的边框添加另外2个像素，并且您有22px作为三角形起点的零位置。

因此，如果您希望三角形从外部DIV的右侧开始20px，则为22px + 20px：

contours, hierarchy = cv2.findContours(imgThresholded.copy(), cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
if len(contours) > 0:
    # Processing here.
else:
    print "Sorry No contour Found."

jsFiddle Demo

right:-42px;

div{position:relative;}
#one{position:absolute;top:52px;right:200px;padding:2px;background-color:white;color:black;border-radius: 2px; }
#two{width:0;height:0;top:-10px;right:-22px;
border-style:solid;
border-width:0 10px 15px 10px;
border-color: transparent transparent #ffffff transparent;
}
body{background:darkcyan;}

Answer 3

这里有两个很好的解决方案，可以让div及其内容与其他页面内容一起正常流动。

如果您只需要＆＃34;三角形＆＃34;，请使用伪元素

＆＃13;

<div id="one">

</div>
More content out side the `one` div

＆＃13;

float

＆＃13;

这一次使用#one { background-color: #ddd; color: black; border-radius: 2px; top: 52px; right: 10px; padding: 2px; clear: both; } .inner { height: 30px; background: green; } #two { float: right; width: 0; height: 0; border-style: solid; border-width: 0 10px 15px 10px; border-color: transparent transparent #f00 transparent; }，也可以保持在顶部/右侧或底部/右侧。

＆＃13;

<div id="one">
  <div id="two"></div>

  Now, anything you write here, whether it is text, or another element
  <div class="inner"></div>
  the "two" div will always stay at the right top<br><br>
    
</div>
More content out side the `one` div

<br>
<br>

<div id="one">
  Now, anything you write here, whether it is text, or another element
  <div class="inner"></div>
  the "two" div will always stay at the right top<br><br>

  This one has it stay at the right bottom

  <div id="two"></div>
</div>
More content out side the `one` div

＆＃13;

search_string = '1abc'
look_here_string = ['dedakloera', 'tuau', '1abcdefg']
x = 0
counter = 0

for item in search_string:
    item = search_string[counter]
    #print item, search_string, look_here_string[x]
    if not item in look_here_string[x]:
        print item, 'not in', look_here_string[x]
        look_here_string.remove(look_here_string[x])
        counter = 0
    else:
        print item, 'in', look_here_string[x]
        counter +=1

＆＃13;

让一个div孩子将父母的右端作为其开始的零位置？

3 个答案: