2

这是我第一次使用 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;
}

这就是它目前的样子（蓝色的东西是我的应用程序查看器布局的一部分，可以打开评论） - 我主要关心的是在右侧添加的空白（黑色）空间，在行的末尾： 我的应用程序查看器中我的应用程序的屏幕截图

jsfiddle在这里：http: //jsfiddle.net/gbMZy/51/

我还尝试将“客户细分”宽度设置为 20% - 遗憾的是无济于事：

截屏：在此处输入图像描述

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

4

5 回答 5

3

也许这个解决方案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%;
}

​</p>

于 2012-06-28T23:08:28.993 回答
0

在第一个 div 中明确设置字体大小，然后使用 'em' 调整行边距。

但我不确定是否会有可扩展性问题..

于 2012-06-22T00:58:15.293 回答
0

当以这种方式使用百分比时，浏览器取整值以获得离散像素值的方式通常会产生余数。如果视口总宽度的 1% 不是精确的像素数，浏览器会向上或向下舍入，导致像素过多或过少，从而导致 div 抖动和边距不等。

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

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

另一方面，如果您使用白色“边框”而不是黑色，则边距抖动将不太明显。

于 2012-06-28T23:32:41.707 回答
0

你的 HTML 读起来很痛苦。您应该真正将样式分离到 CSS 中，而不是像那样内联编写所有内容，这样更难阅读/调试，并且很容易出错。

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

于 2012-06-28T23:55:05.803 回答
0

百分比总是在浏览器上以整数方式计算，并根据 body 的总宽度或父元素的环绕区域/宽度进行调整。这些尺寸将在计算给子元素或填充样式的内部和外部像素宽度以及在具有指定像素大小的元素上给定的边框之后分配。

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

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

于 2012-07-03T13:47:15.327 回答