Div内的div CSS样式 - 使用内边距将内部div居中在外部？

Question

Div内的div CSS样式 - 使用内边距将内部div居中在外部？

5

我有两个div，一个在另一个里面。#outer是最外层的div，#frame是#outer内部的div。

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

#frame是文本将要放置的地方 - 文本将不断变化，具有不同的字符串长度。然而，我只想让#frame占据#outer的中心部分，这样文字就不会泄漏出去（这是因为#outer中的背景图片具有类似黑板的形状 - 我希望看起来像是文字被写在那个黑板上，而不是文字超出线条范围）。

我应该使用padding来实现这个目标，对吗？也就是在#frame上设置padding属性，对吧？还是应该调整frame的宽度？如何居中？使用float还是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插件，不确定是否会有什么变化...

- Seeeyonnn

如果文本太长，你打算如何显示？是显示滚动条还是调整容器高度以包含文本。基于此，我们可以做出相应的处理。 - noob

4个回答

1

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

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

它可以正常工作。唯一的问题是它会改变您的图片的高度/宽度，不同于您想要的尺寸。

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

另一个可能效果更好的选择是这个

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

这很符合您的要求。

如果你想要可调整宽度而不是固定像素，你可以尝试以下内容：

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

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

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

我所做的只是这样的

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

- CRABOLO

感谢您抽出时间回答@AlienArrays。正如我在上面的评论中所述，当有人在他/她的答案中写了比我在问题中写的更多时，我至少会优先考虑那个答案来解决问题...但还是感谢您的帮助。 - Seeeyonnn

1

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;
}

演示

- Amarnath Balasubramanian

感谢 @Amarnath Balasubraman 的回答。正如我在上面的评论中所述，当有人在他/她的回答中写得比我在问题中写得更多时，我至少会优先考虑那个回答来解决问题...但还是感谢你的帮助！ - Seeeyonnn

0

我使用了overflow:hidden;来处理长文本以适应框架。所以你的板子会像这样http://jsfiddle.net/3pNSx/70/

- noob

感谢回答，@noob。正如我在上面的评论中所述，当有人在他/她的答案中写得比我在问题中写的还多时，我至少会让那个答案先尝试解决问题...但还是谢谢你的帮助。 - Seeeyonnn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Blake Mann · Accepted Answer

这个问题的答案比较复杂。虽然可以使用padding来实现，但我认为以下方法是最流畅和最稳定的解决方案，而且在响应式网站上也非常有效，随着屏幕大小的变化，它不会出现错误。

以下是演示此操作的示例，您可以跟随我的说明并同时查看完整代码：

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％。底部将从外部div的底部向下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 属性，因为屏幕变得越来越宽。这仅因为您设置了一个固定的高度来切断图像，使百分比无关紧要。）

在我提供的那个例子中，尝试调整底部框架的宽度大小，观察虚线保持在正确位置，并且内容会自动调整。还要注意，容器在图像变得太小之前会保持设置的高度，然后一切都开始缩小。唯一明显的问题是，因为所有文本内容都按字母顺序绝对定位，重新调整屏幕大小会导致元素溢出，直到新幻灯片进入，字母根据新宽度重新定位。这只是要记住的事情。