div+css如何用百分比？？

Posted 2023-04-30

呵呵。你可以在他外面设个像素值。不过，这样就失去了百分比的意义。简单的几个Div设百分比还是没有问题的。但是。框架还是少用。Ie对框架的支持并不是很好。用Div保险点。 参考技术A 用绝对定位吧，给父DIV设置相对定位。如果要图片按照百分比来缩放显示的话，还是用img标签加上z-index属性，把宽度和高度设置为百分比，background属性虽然支持平铺但是伸缩性还是不好 参考技术B 你可以将外层的div给一个固定的值，然后里面用百分比 参考技术C 在符合标准的 Xhtml 模式下，将 DIV 的高度简单的设置为 100% 往往并不能达到想要的效果，原因是“百分比”是个相对于父节点的值，如果你没有设置他们的父节点的高度，那么设置 DIV 的高度为100%就没有了意义。
另外一个问题是你或许期望的并不是100%，而是在页面高度不够一屏时按照100%显示，当你的页面超过视窗的大小时，DIV 要能够撑开，这样的话min-height才是你真正想要的。
下面的代码可以让页面不足一屏时按照100%显示，当超过一屏时，又能够撑开：
html, body
height: 100%;

#container /* this is the div you want to fill the window */
min-height: 100%;

由于 Internet Explorer (IE) 6 及其以下的版本并不支持 min-height 属性，因此，我们需要添加针对 IE 的代码。
* html #container
height:100%

在 IE 下，当 DIV 的内容超过 DIV 本身的高度时， DIV 会自动撑开，因此这样的代码可以很好的解决上面的问题。 参考技术D 目前paddinng 和margin用百分比还不能兼容多种浏览器，所以，想用还是等若干年后再看吧。

如何用css分隔div的孩子？

【中文标题】如何用css分隔div的孩子？

【英文标题】：How to space the children of a div with css?

【发布时间】：2011-09-24 07:42:59

【问题描述】：

我想要一个 30px 的间隙；在我 div 的所有孩子之间。例如，如果我有：

<div id="parent">    
   <img ... />
   <p>...</p>
   <div>.......</div>
</div>

我希望它们都有 30px 的空间；它们之间。如何使用 CSS 做到这一点？

【问题讨论】：

元素四周各有 30px 的空间

【参考方案1】：

对于未知数量的孩子，您可以使用。

#parent > * 
    margin: 30px 0;

这将为#parent 的所有直接子级添加 30 像素的顶部和底部边距。

但img 不显示为默认块，因此您可以使用：

#parent > * 
    display: block;
    margin: 30px 0;

块元素的垂直边距将被折叠。但是您将在父 div 的顶部和底部有边距。为避免这种情况，请使用以下代码：

#parent > * 
    display: block;
    margin-top: 30px;


#parent > *:first-child 
    margin-top: 0px;

这只会添加上边距并删除第一个元素的上边距。

【讨论】：

所以填充将应用于所有后代，而不仅仅是孩子。

在您发表评论并添加“>”直接子选择器时，我正在编辑我的帖子。

查看 Topiq 的答案以获得更短的解决方案。要了解这两个选择器之间的区别，请看这里：***.com/a/12289888/1461929

【参考方案2】：

下面的css会很好用

div > *:not(:last-child) 
    display: block;
    margin-bottom: 30px; 
 

> 选择所有作为div 直接子元素的元素（这样你就不会遇到奇怪的内部间距问题），并使用:not(:last-child) 为所有不是最后一个子元素的元素添加底部边距（所以你不会得到一个尾随空格）。

display: block 确保所有元素都显示为块（占用自己的行），imgs 默认情况下不是。

【讨论】：

请解释为什么这是解决 OP 问题的方法。不鼓励在 SO 上仅提供代码答案，因为它们对 OP 或网站的未来访问者没有帮助。

最佳答案在这里。这篇文章更好地解释了与公认答案的区别：***.com/a/12289888/1461929

【参考方案3】：

可能最简单的方法是这样的：

#parent * 
  margin-bottom: 30px;

或

#parent * 
  margin: 15px 0;

但请记住，这将获得#parent 中的所有内容，包括p 和div 标记内的内容。如果您只想要直接子代，则可以改用#parent > *（这称为直接后代选择器）。

请记住，<img> 默认是内联元素，因此您可能需要这样做：

#parent img 
  display: block;

让它使用边距。

【参考方案4】：

您可以通过以下方式轻松做到这一点：

#parent > * + * 
  margin-top: 30px;

这将应用于除第一个之外的所有直接子级，因此您可以将其视为元素之间的间隙。

【参考方案5】：

用代码为它们创建一个 CSS 类：

.BottomMargin

    margin-bottom:30px;

并使用 jQuery 或手动将此类分配给 parent 的孩子：

<div id="parent">    
    <img class="BottomMargin" ... />
    <p class="BottomMargin">...</p>
    <div>.......</div>
</div>

最后一个可能没有，这也可以使用 jQuery。

【参考方案6】：

你可以通过 CSS 标准试试：

div > *
   margin-top:30px;

更多信息可以在这里找到：http://www.w3.org/TR/CSS2/selector.html#child-selectors

【参考方案7】：

只需在 p 元素上放置 30px 的顶部和底部边距：

p  margin: 30px 0 30px 0; 

注意：以上内容会将这个边距添加到您的 all 您的 p 元素中。要仅限于此，请添加一个内联样式属性：

<p style="margin: 30px 0 30px 0;">...</p>

或者更好地使用一个类：

<p class="mypara">...</p>

在css中：

p.para  margin: 30px 0 30px 0; 

顺便说一句，这里的边距表示法是：

margin: top right bottom left;

或者您可以单独指定顶部和底部边距：

margin-top: 30px;
margin-bottom: 30px;

所以你可以有这样的课程：

.bord  margin-bottom: 30px; 

并将此类添加到您希望底部边距为 30 像素的每个元素：

<div class="bord">....</div>

【讨论】：

我认为他希望父元素中的所有元素都有 30px 的边距，而不仅仅是段落。

Richard 的意思是他给出的代码实际上会给 OP 他想要的东西，但也许 OP 只是将这 3 个元素作为一个标记，它可能包含超过 3 个子元素。

如果你可以通过它的父 id 选择段落，为什么要另一个类

【参考方案8】：

使用 CSS gap 属性。

.parent_class_name
  gap: 30px;

上述 CSS 代码将在 parent_class_name 类的子级之间应用 30px 的间隙/分隔符。

示例：此代码将在元素（行和列）之间应用1rem 间隙。

<div class="gap_container">
  <div>a</div>
  <div>b</div>
  <div>c</div>
</div>

.gap_container
  display: flex;
  flex-direction: column;
  gap: 1rem;

gap 属性定义行和列之间的间隙大小。它是以下属性的简写：

行间距 列间距

分别应用 row 和 column 值。 gap: row-value column-value;

了解更多：w3school

【参考方案9】：

最可靠的方法是为所有内部元素添加一个类，最后一个除外。

<style>
.margin30 
   margin-bottom: 30px;

<div id="parent">    
  <img class="margin30" ... />
  <p class="margin30">...</p>
  <div>.......</div>
</div>

这样，额外的元素就可以用类来标记。请记住，您可以通过在标签中的类值中用空格分隔它们来对样式元素进行多类化，如下所示：

<img class="margin30 bigimage" ... />

最后，您可以使用 Javascript 动态附加类（代码不在我的脑海中，未经测试，没有完整性检查或错误处理，ymmv 等）：

function addSpace(elementId) 
   children = document.getElementById(elementId).childNodes;
   for (i=0;i<(children.length - 1);i++)
      children[i].className = "margin30 " + children[i].className;