Question

这是第一次，我正在使用css布局构建一个完全可伸缩的应用程序，当用户调整窗口大小时，字段应该缩小并相应增长。首先我想，容易，对吗？但现在我真的在尺寸上摸不着头脑，因为看起来边缘不太正确......我希望在所有各个领域之间都有一个类似边框的分隔符......

我的代码是：

<div style='background-color:#000000;width:100%;height:100%;'>

    <div style='width:100%;height:66%;margin-bottom:1%;'>

        <div style='float:left; width:19%;height:100%;margin-right:1%;' class='app_14_concept_block'>keypartners</div>
        <div style='float:left; width:19%;height:100%;margin-right:1%;'>

            <div style='height:49%;margin-bottom:6%' class='app_14_concept_block'>key activities</div>

            <div style='height:49%;' class='app_14_concept_block'>key resources</div>

        </div>
        <div style='float:left; width:19%; height:100%;margin-right:1%;' class='app_14_concept_block'>value propositions</div>
        <div style='float:left; width:19%; height:100%;margin-right:1%;'>

            <div style='height:49%;margin-bottom:6%'  class='app_14_concept_block'>customer relationship</div>

            <div style='height:49%;' class='app_14_concept_block'>channels</div>

        </div>
        <div style='float:left; width:19%; height:100%;padding-right:1%' class='app_14_concept_block'>customer segments</div>
    </div>
    <div style='width:100%;height:33%;'>
        <div style='float:left; width:49%; height:100%;margin-right:1%;' class='app_14_concept_block'>cost</div>
        <div style='float:left; width:50%; height:100%;' class='app_14_concept_block'>revenue</div>
    </div>

</div>

css是这样的：

.app_14_concept_block{
  background-color:#ffffff;
}
.app_14_concept_block:hover{
background-color:#eeeeee;
}

这就是它目前的样子（蓝色的东西，我的应用程序查看器布局的一部分会打开评论） - 我主要担心的是右侧添加的空（黑色）空间，行： screenshot from my app inside my app viewer

jsfiddle here：http://jsfiddle.net/gbMZy/51/

我也尝试将“客户群”的宽度设置为20％ - 遗憾的是无济于事：

截图： enter image description here

jsfiddle：http://jsfiddle.net/gbMZy/52/

Answer 1

也许此解决方案Footer Items Expanding with Viewport Evenly也适用于您的情况。

百分比宽度不能与边框或边距一起使用。一个可能的解决方法是让包装容器的宽度为20％/ 50％，然后是带边框等的元素在之内。这应该有助于避免闪烁和随机间距。

因此，在您的情况下，这可能类似于：http://jsfiddle.net/qC4JV/1/

HTML：

<div class="top">
    <div class="cell">
        <div class="border right"></div>
        <div class="border bottom"></div>
        <p>value</p> 
    </div>
    <div class="cell">
        <div class="border right"></div>
        <div class="border bottom"></div>
        <p>value</p>          
    </div>
    <div class="cell">
        <div class="border right"></div>
        <div class="border bottom"></div>
        <p>value</p>           
    </div>
    <div class="cell">
        <div class="border right"></div>
        <div class="border bottom"></div>
        <p>value</p>          
    </div>
    <div class="cell">
        <div class="border bottom"></div>
        <p>value</p>           
    </div>
</div>

<div class="bottom">
    <div class="cell">
        <div class="border right"></div>
        <p>value</p>          
    </div>
    <div class="cell">
        <p>value</p>         
    </div>
</div>

CSS：

body, html{
    height: 100%;
    background: #000;
}

.top{
    height: 60%;
}

.bottom{
    height: 40%;
}

.cell{
    float: left;
    height: 100%;
    background: #fff;
    position: relative;
}

.cell .border.right{
  position: absolute;
  right: 0;
  top: 0;
  width: 10px;
  height: 100%;
  background: #000;
}

.cell .border.bottom{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  background: #000;
}

.top .cell{
  width: 20%;
}

.bottom .cell{
  width: 50%;
}

Answer 2

在第一个div中显式设置font-size，然后使用'em'调整行边距。

但我不确定是否存在可扩展性问题..

Answer 3

以这种方式使用百分比时，浏览器围绕值获取离散像素值的方式通常会导致余数。如果视口总宽度的1％不是精确的像素数，浏览器将向上或向下舍入，导致几个像素太多或太少，因此抖动的div和不相等的边距。

即使Twitter的Bootstrap框架，一个非常完善的系统，在使用其流体网格系统时也会遇到同样的问题。

我不想这么说，但是如果你必须创建这样的布局，并且不可接受不可靠的元素尺寸，那么使用表格可能就好了。

另一方面，如果你使用白色'边框'而不是黑色，边缘抖动将不那么明显。

Answer 4

您的HTML阅读很痛苦。你应该把样式分成CSS而不是像那样编写所有内联，它更难以读取/调试，并且很容易出错。

以下是一个更好的解决方案：http://jsfiddle.net/gbMZy/51/

Answer 5

百分比始终将在浏览器上以圆值方式计算，并将根据正文或父元素换行区域/宽度的总宽度进行对齐。在计算给予子元素或填充样式的内部和外部像素宽度以及在具有指定像素大小的元素上给出的边界之后，将分配这些尺寸。

HTML：

<div class="top">
  <div class="cell">
    <div class="border right">
    </div>
    <div class="border bottom">
    </div>
    <p>
      Top Block-1
    </p>
  </div>
  <div class="cell">
    <div class="border right">
    </div>
    <div class="border bottom">
    </div>
    <p>
      Top Block-2
    </p>

  </div>
  <div class="cell">
    <div class="border right">
    </div>
    <div class="border bottom">
    </div>
    <p>
      Top Block-1
    </p>

  </div>
  <div class="cell">
    <div class="border right">
    </div>
    <div class="border bottom">
    </div>
    <p>
      Top Block-3
    </p>

  </div>
  <div class="cell">
    <div class="border bottom">
    </div>
    <p>
      Top Block-4
    </p>

  </div>
</div>

<div class="bottom">
  <div class="cell">
    <div class="border right">
    </div>
    <p>
      Bottom Block-1
    </p>

  </div>
  <div class="cell">
    <p>
      Bottom Block-2
    </p>

  </div>
</div>

CSS样式：

body, html{
  height: 100%;
  background: #3355A9;
}

.top{
  height: 60%;
}

.bottom{
  height: 40%;
}

.cell{
  float: left;
  height: 100%;
  background: #ffca77;
  position: relative;
  text-align:center;
  font-weight:bold;
}
.cell p{
  padding:10px;
}

.cell .border.right{
  position: absolute;
  right: 0;
  top: 0;
  width: 10px;
  height: 100%;
  background: #3355A9;
}

.cell .border.bottom{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  background: #3355A9;
}

.top .cell{
  width: 20%;
}

.bottom .cell{
  width: 50%;
}

在代码块上尝试此解决方案：http://codebins.com/codes/home/4ldqpbt

因此，您可能会找到更好的解决方案，因为它具有更好的用户界面和清晰的视野，可以根据需要显示精确的结果。

混淆了web-app的维度百分比

5 个答案: