我明白如果我浮动一个元素,如果它们没有自己设置浮点数或者至少清除浮点数,则后面的元素最终会消失在该元素后面。就像在这个例子中发生的“盒子三”一样。但为什么第三盒的内容跳出了div?这个盒子的数字3或任何潜在内容不应该是里面»第三栏«?
String requestedName = "AQCB Number"; // sample string for testing
List<WebElement> inputs = driver.findElements(By.cssSelector("input[type='radio']"));
for (WebElement input : inputs)
{
String onclick = input.getAttribute("onclick");
String[] parts = onclick.split(",");
String name = parts[parts.length - 1];
name = name.substring(1, name.length() - 2);
System.out.println(name); // for debug purposes
if (name.equals(requestedName))
{
// name match, do stuff here...
}
}
*编辑:
这里有另一个例子来解释我不明白的问题。 为什么不在蓝盒子里面排第二? @Terry:好的,如果我缩小第一个框'宽度,内容会跳起一行并进入div。但是为什么它首先不存在呢?没有足够的空间可用,因为盒子是完全空的?
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>
.box {
text-align: center;
font-size: 30px;
color: red;
margin: 5px;
width: 200px;
height: 100px;
background: grey;
}
.two {
border: 2px solid red;
float: left;
opacity: 0.66;
}
.three {
opacity: 0.33
}
答案 0 :(得分:0)
试试这个。
.box {
text-align: center;
font-size: 30px;
display:block;
color: red;
margin: 5px;
width: 200px;
height: 100px;
line-height:100px;
background: grey;
}
.one{
border:1px solid green;
display:block;
}
.two {
border: 1px solid red;
opacity: 0.66;
}
.three {
border: 1px solid yellow;
opacity: 0.66;
}
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>
答案 1 :(得分:0)
是的,内容应该在方框3内,但由于你已经设置了所有宽度相同的方框,这意味着方框3中的内容不能被推到一边而只能被推到底部 - 你可以看到如果你减小它的宽度,浮动与框3的内容交互:
.box {
text-align: center;
font-size: 30px;
color: red;
margin: 5px;
width: 200px;
height: 100px;
background: grey;
}
.two {
border: 2px solid red;
float: left;
opacity: 0.66;
width: 25px;
}
.three {
opacity: 0.3;
}
&#13;
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3 random content here</div>
&#13;