Question

所以我有2个div，1个在另一个内。 #outer the outermost div和#frame div w / in #outer。

关于#outer，我已经应用了占用整个浏览器空间的背景图片。

框架是文本的位置 - 文本将随着不同的字符串长度不断变化。但是，我只希望#frame占据#outer的中心部分，这样文本就不会泄漏到外面（这是因为#outer中的背景图片有一个类似黑板的图形 - 我希望它看起来好像文本是写在黑板上没有文字在线外运行）。

我应该使用填充这个权利吗？在设置#frame的padding属性对吗？或者我应该调整框架的宽度？我该如何集中这个吸盘？！浮动？垫？我迷路了...

HTML：

<div id='outer'>
  <div id='frame'>
  </div>
</div>

CSS：

#outer {
height: 612px;
background: url('http://i151.photobucket.com/albums/s147/yungottii/abveaspi_background_final.png') no-repeat 0 0 scroll;
background-size: 100%;
}

#frame {
text-align: center;
height: 612px;   
padding: 50px;
overflow: auto;
font-family: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
font-size: 60px;
color: black; 
}

过去一小时我一直在弄乱填充边框和边距，试图掌握一般的盒子模型。任何人都可以帮助我实现这一目标的快速指示？

PS可能很难看到，因为这可能与您的浏览器设置不完全兼容，但您可以访问：

http://www.abveaspirations.com

看看上面的代码当前正在吐出什么。正如您可能看到的那样，特别长的琴弦/文字泄漏到玻璃外面。顺便说一下，我正在使用textualizer插件，不确定是否会改变任何内容......

Answer 1

这是一个比它更复杂的答案..这可以通过填充来完成，但我觉得这种方式对于你正在做的事情是最顺利和最可靠的结果，它也有效非常适合响应式网站，因此在您上下调整屏幕尺寸时不会中断。

以下是此操作的演示，以便您可以按照我所说的内容进行操作，并同时查看完整代码：

http://jsfiddle.net/9FtFh/1/

好的，首先，只是设置你的外部div，我基本上只是设置position: relative;，其他一切都很好。这只是因为我将帧设置为position: absolute;并且我希望它相对于此外部div进行定位。

之后，让我们看一下对框架的更改......

position: absolute;
top: 10%;
bottom: 20%;
left: 15%;
right: 15%;

这些样式的目的是将div的范围扩展到某些点。请注意，框架元素上没有设置的高度或宽度，必须取出它们。基本上，这些样式表示div的顶部将是外部div顶部的10％。底部将是外部底部的20％..依此类推。我使用百分比代替像素，因为这将确保定位适应屏幕的任何宽度。

请注意，我在框架上设置了虚线边框，以便您可以随时查看框的大小和位置。

我并不担心文本内容的垂直居中，因为我很确定你的文本效果插件会处理这个问题。如果我错了，请告诉我，我可以扩展一下。

现在，另一个挑战是，一旦屏幕达到一定的较小尺寸，图像的高度就会比外部容器的高度小。这可能不是你想要的，所以我添加了一个媒体查询：

@media only screen
and (max-width: 1060px) {

    #outer {
        height: 0;
        padding-top: 47.85%;
    }

}

这样做只是在屏幕达到一定宽度后才应用样式。我根据图像开始收缩超过容器边缘的点选择最大宽度。

对于应用的样式，这是在重新调整大小时保持容器的纵横比的一个小技巧。我将height设置为0，然后使用padding-top重新创建高度。我使用的数字（47.85％）是图像高度与宽度的近似比率。（图像宽度约为47.85％。）现在开始使用屏幕缩小整个容器，以匹配图像。因为您的车架绝对定位，所以它将保持在行驶状态，并保持其基于百分比的位置。

我可能感兴趣的一件事就是在图像宽度开始变宽以至于底部被切断时设置另一个媒体查询。此时，您可以将框架底部设置为0%，以便与之匹配。（您可能还需要定期更新top属性，因为屏幕越来越宽。这只是因为您有一个设置高度切断图像，使百分比无关紧要。）

在我链接的示例中，尝试重新调整底部框架的宽度越来越大，并观察虚线如何保持正确的位置，并调整内部的内容。还要注意容器如何保持设定高度直到图像变得太小，然后一切都开始缩小。

我只能看到一个明显的问题，那就是因为你的所有文字内容都是逐字逐句定位的，重新调整屏幕尺寸会导致元素溢出，直到新的幻灯片进入，并根据新的宽度重新定位字母。这只是要记住前进的事情。

Answer 2

选项1 http://jsfiddle.net/bdbpY/

#outer {
   background-size: 100% 100%;
}

它有效。唯一的问题是它会将图像的高度/宽度更改为您可能想要的其他值。

选项2 http://jsfiddle.net/bdbpY/1/

另一个可能更好的选择是

#frame {
   height: 100px;
   overflow: hidden;
}

这可以满足您的需求。

如果你要使用可调宽度而不是固定的px，你可以试试像

这样的东西

#frame {
   max-height: 50%;
   overflow: hidden;
}

选项3 http://jsfiddle.net/qLNFz/

这可能是最好的选择，而且最简单。

我所做的就是这个

#frame {
    height: 29%;  
    padding: 10px 20px;
}

Answer 3

<强> HTML

<div id='outer'>
    <div id='frame'><span class="sp">Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample  </span>
    </div>
</div>

<强> CSS

* {
    margin:0px;
    padding:0px;
}
#outer {
    background: url('http://i151.photobucket.com/albums/s147/yungottii/abveaspi_background_final.png') no-repeat 0 0 scroll;
    background-size: 100% 100%;
    width:1000px;
    margin:0px;
}
#frame {
    margin:20px auto;
    text-align: center;
    width:600px;
    height:400px;
    padding: 50px;
    overflow: hidden;
    font-family: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
    font-size: 60px;
    color: black;
    border:1px solid black;
}
.sp {
    overflow:hidden;
}

<强> Demo

Answer 4

我已将overflow:hidden;用于长文本以适应框架。所以你的董事会就像这样http://jsfiddle.net/3pNSx/70/

在div css样式中划分 - 使用填充将内部div放在外部？

4 个答案: