个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
29
4
我目前正在试用 Zurb Foundation，我的窗口大小有问题。
<body id="gradient">
<div id="title" class="small-2 large-6 large-centered text-center columns">Example</div>
</body>
目前我将单词 Example 设置为 large-6 而不是 large-12 因为如果我超出了 large-10 那么我的窗口大小将增加宽度，从而导致出现左右滚动。
但是，我认为我已经正确设置了我的 css 以防止这种情况发生。
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#gradient {
background: #00BFFF;
background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF);
background: linear-gradient(to right bottom, #086A87, #00BFFF);
border-radius: 2px;
background-size:100% 100%;
background-repeat: no-repeat;
}
我认为将我的 background-size 设置为 100% 100% 会固定我的窗口并防止任何额外的宽度和高度(因为我不想向上/向下/向左滚动/对)。
我想解决这个问题的原因是，当我拖动屏幕以从全屏缩小尺寸时，Example 一词将从屏幕中央消失，并更靠近屏幕的右侧窗口因此你看不到这个词。
抱歉，如果这让您感到困惑，如果您需要任何说明，请告诉我。谢谢!
编辑:http://jsfiddle.net/5vdobycy/9/
希望我做对了，正如您所看到的，Example 并不完全居中，因为您可以向右滚动并且单词的一部分落在纯白色背景中。 jsfiddle 并没有真正显示它在我的浏览器上的显示方式，但这几乎就是我遇到的问题。
但是，不确定我是否没有正确包含 Foundation 还是因为 jsfiddle，但是更改列没有区别，即 large-6 显示与 large-12 相同 在 jsfiddle 上。
最佳答案
让文本居中的最简单方法是使用全宽列并对其应用 text-align: center:
<div id="title" class="small-12 text-center column">Example</div>
你的 fiddle 有多个问题:
您用
覆盖了列放置position: absolute;
top: 180px;
left: 400px;
small-2 太小无法容纳文本，所以它从右边伸出:
这也是为什么文本似乎没有居中的原因——列本身是居中的，但文本只是从居中的列向右转义。
设置 width、height 或 background-size 都不会阻止页面滚动。为此，您需要 overflow CSS 属性。
这是一个简单的例子:
#gradient {
height: 100%;
background: #00BFFF;
background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF);
background: linear-gradient(to right bottom, #086A87, #00BFFF);
border-radius: 2px;
background-size:100% 100%;
background-repeat: no-repeat;
}
#title {
font-size: 60px;
color: #FF8000;
}<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/css/foundation.min.css" rel="stylesheet" type="text/css">
<div id="gradient">
<div class="row ">
<div id="title" class="small-12 text-center column">Example</div>
</div>
</div>关于html - 固定窗口大小；祖布基金会，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29327018/
29
4
0
我很抱歉，如果这非常简单 - 我已经使用基础框架(5.0)创建了一个网页 - 目前它非常简单 - 我只是在寻找一种方法来定义页面上元素的高度.如果有人能指出我正确的方向，将不胜感激。 最佳答案 如果你
我是一名优秀的程序员,十分优秀！