<div class="parent">
<div class="one"></div>
<div class="two"></div>
</div>
以上是我在codepen here上模拟的示例代码.
子元素一和二可以向右或向左浮动,反之亦然;这意味着如果一个向右浮动,另一个可以向左浮动,反之亦然。
现在我的问题是 →
第一个 child 是按照HTML写的顺序?如果这是真的,那意味着无论它是在向右浮动时首先在浏览器中呈现,还是在向左浮动时在浏览器中呈现第二个,它将始终保持第一个 child ,或者第一个或第 N 个 child 不基于它在 HTML 中的编写顺序,但按照在浏览器中呈现的顺序。
我为什么要问这样的问题。
有些时候,尤其是在 wordpress 中,两个模板之间的唯一区别是,一个侧边栏在左侧,而另一个侧边栏在右侧。 LESS IS MORE 没有理由创建一个单独的模板,因为整个 HTML 是相同的,唯一的区别是 2 列的顺序。
所以我在想这样一种情况,如果我们可以在列上设置 margin-right
,那么我们可以使用一些第一个子属性,这是首先出现在浏览器中的列。
如果是这样的话→ https://codepen.io/codeispoetry/pen/xdymZJ
然后 margin-right
应该应用于 .one
但是如果我们颠倒顺序首先出现绿色然后是蓝色然后 margin-right
应适用于 .two
我不希望通过 javascript 或 php 执行此操作,但 CSS 可能会以某种方式利用 first child
属性。
最佳答案
这完全是根据元素在标记中出现的位置完成的。
查看第一个示例的更新版本:https://codepen.io/anon/pen/YVJdBX .标识为“first-child”的元素具有红色边框。
HTML:
<div class="parent">
<div class="one child"></div>
<div class="two child"></div>
</div>
CSS:
.parent {
height: 900px;
background-color: #FFFFFF;
}
.one {
background-color: blue;
height: 900px;
float: right;
width: 33%;
margin-right: 30px;
}
.two {
background-color: green;
width:60%;
height: 900px;
float: left;
}
.child:first-child
{
border:solid 1px red;
}
我认为您的建议行不通。 CSS 告诉浏览器如何/在屏幕上呈现东西,它不能 react 东西被呈现的地方,以便应用更多规则,这实际上就是你希望。
关于html - first child under parent setting margin 的概念基于浏览器中渲染的第一个 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44073292/