Question

我有一个div容器“page”同样分为两个div元素“ page-left ”和“ page-right ”（width="50%"）一本“书”

我试图告诉浏览器为任何div元素设置属性"float"，例如：（。xlarge，.large，.medium，..）根据其父级容器。这样：

如果元素在页面左侧内，它应该float:right;，如果它在页面右侧内，它应该float:left;

enter image description here

<div class="half-Page page-right">
        <div class="large"><p>MIND</p></div>

所以我的代码出了什么问题？

这里是完整代码：

HTML：

<body>
<div class="container">
    <div id="page1">
    <div class="half-Page page-left">
        <div class="xlarge"><p>RE</p></div>
        <div class="clear"></div>
        <div class="large">
            <div class="medium">
                <div class="small"><p>ME</p></div>
                <div class="xsmall"><p>link</p></div>
            </div>
            <div class="medium"><p>SU</p></div>
        </div>
    </div>
    <div class="half-Page page-right">
        <div class="large"><p>MIND</p></div>
        <div class="large"></div>
        <div class="large"></div>
    </div>
    </div>

</div>
</body>
</html>

CSS：

@charset "utf-8";
/* CSS Document */
/* ======== Page number 1 */
 body, html {
}
.container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: hidden;
    background: url(img/page1.jpg) repeat;
}
#page1 {
    position: relative;
    height: auto;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 80px;
    margin-left: 80px;
}
.half-Page {
    background: #BD2325;
    width: 50%;
    min-height: 500px;
    height: auto;
}
.page-right .xlarge, .medium, .xsmall, .large, .small {
    float: left;
}
.page-left .xlarge, .medium, .xsmall, .large, .small {
    float: right;
}
/* centralization for all elements */
 .xlarge, .medium, .xsmall, .large, .small {
    margin: auto;
    position: relative;
    top: 0;
    bottom: 0;
    /* vertical center */
     left: 0;
    right: 0;
    /* horizontal center */
}
/* aspect ratio 1:1 */
 .xlarge, .medium, .xsmall {
    width: 100vw;
    height: 100vw;
}
/* aspect ratio 2:1 */
 .large, .small {
    width: 100vw;
    height: 50vw;
}
.xlarge {
    background: pink;
    max-height: 360px;
    max-width: 360px;
}
.large {
    background: #74AA86;
    max-height: 180px;
    max-width: 360px;
}
.medium {
    background: #AFDFD6;
    max-height: 180px;
    max-width: 180px;
}
.small {
    background: #F5FCC2;
    max-height: 90px;
    max-width: 180px;
}
.xsmall {
    background: #C970C3;
    max-height: 90px;
    max-width: 90px;
}
.clear {
    clear: both;
}

Answer 1

当您在CSS选择器中使用逗号时，您需要在每个选择器前重复.page-left，否则它会在页面左侧选择任何xlarge元素以及任何媒体，xsmall等任何地方的元素＆＃39;

.page-right .xlarge, 
.page-right .medium , 
.page-right .xsmall, 
.page-right .large, 
.page-right .small
{
    float: left;
}

Answer 2

您已使用过两次声明。最后一次使用。

.page-right .xlarge, .medium, .xsmall, .large, .small {
   float: left;
}

.page-left .xlarge, .medium, .xsmall, .large, .small {
   float: right;
}

也许你想要：

.page-right .xlarge, 
.page-right .medium, 
.page-right .xsmall, 
.page-right .large, 
.page-right .small {
   float: left;
}

等......

在这种情况下，可能更快：

.page-right div { float: left; }

什么将整合在一起。并且只对那些不能使用它的元素进行预测。

（设置float: none;）

CSS继承属性到子类

2 个答案: