浮动问题:内容跳出父div

时间:2015-09-01 20:04:20

标签: html css css-float clear

我明白如果我浮动一个元素,如果它们没有自己设置浮点数或者至少清除浮点数,则后面的元素最终会消失在该元素后面。就像在这个例子中发生的“盒子三”一样。但为什么第三盒的内容跳出了div?这个盒子的数字3或任何潜在内容不应该是里面»第三栏«?

http://jsfiddle.net/7vw4Leg5/

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。但是为什么它首先不存在呢?没有足够的空间可用,因为盒子是完全空的?

http://jsfiddle.net/utsc84pq/

<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
}

2 个答案:

答案 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的内容交互:​​

&#13;
&#13;
.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;
&#13;
&#13;