Question

我在使用一些基本的HTML / CSS方面遇到了一些麻烦，想知道我做错了什么，或者是否有更聪明的方法做事？

我基本上想要创建一个简单的用户界面并创建了它，但它似乎并没有正常工作。当我调整浏览器窗口大小时，Box4或6似乎行为不端：

    <style type="text/css">
    .box1
    {
        width:100%;
        height:25%;
        background-color:#eee;
    }
    .box2
    {
        width:60%;
        height:56%;
        background-color:#eee;
        float:left;
        margin-top:1%;
    }
    .box3
    {
        width:39%;
        height:40%;
        background-color:#eee;
        margin-left:61%;
        margin-top:1%;

    }
    .box4
    {

        width:39%;
        height:14%;
        background-color:#eee;
        margin-left:61%;
        margin-top:1%;  

    }
    .box5
    {
        width:50%;
        height:14%;
        background-color:#eee;
        float:left;
        margin-top:1%;
    }
    .box6
    {
        width:49%;
        height:14%;
        background-color:#eee;
        margin-left:51%;
        margin-top:1%;

    }


    html,body{
        height:100%;
        //width:100%;
    }
    </style>


    <div class="box1">
        box1
    </div>
    <div class="box2">
        box2
    </div>
    <div class="box3">
        box3
    </div>
    <div class="box4">
        box4
    </div>
    <div class="box5">
        box5
    </div>
    <div class="box6">
        box6
    </div>

已编辑 - 在调整浏览器窗口大小时添加了我看到的屏幕抓取功能。 Attached Image

请大家帮忙，非常感谢。

斜线。

Answer 1

似乎在这里工作正常。也许你可以更清楚这个问题？

element(X,[H|T]) :- 
      X=H
   ;
      element(X,T).

intersection(L1,L2,R) :-
    not((
        element(A,L1),
        not(element(A,L2))
    )),
    not((
        element(A,L1),
        not(element(A,R))
    )).

html,body{height:100%;/*width:100%;*/}
.box1{width:100%;height:25%;background-color:#eee;}
.box2{width:60%;height:56%;background-color:#eee;float:left;margin-top:1%;}
.box3{width:39%;height:40%;background-color:#eee;margin-left:61%;margin-top:1%;}
.box4{width:39%;height:14%;background-color:#eee;margin-left:61%;margin-top:1%;}
.box5{width:50%;height:14%;background-color:#eee;float:left;margin-top:1%;}
.box6{width:49%;height:14%;background-color:#eee;margin-left:51%;margin-top:1%;}

Answer 2

试试这个

＆＃13;

html,body{height:100%;}
.box1{width:100%;height:25%;background-color:#eee;}
.box2{width:60%;height:56%;background-color:#eee;}
.box3{width:39%;height:40%;background-color:#eee;}
.box4{width:39%;height:15.5%;background-color:#eee;}
.box5{width:50%;height:14%;background-color:#eee;}
.box6{width:49%;height:14%;background-color:#eee;}
body > div {
    float: left;
    vertical-align: top;
    margin: 3px 0 0 3px;
}

＆＃13;

<div class="box1">
  box1
</div>
<div class="box2">
  box2
</div>
<div class="box3">
  box3
</div>
<div class="box4">
  box4
</div>
<div class="box5">
  box5
</div>
<div class="box6">
  box6
</div>

＆＃13;

Answer 3

你检查了身高％的总和吗？框2的高度似乎为56％，但框3和框4的总高度为55％（包括1％的边距）。

简单的HTML UI框

3 个答案: