Question

我设计了一个带有div和两个子div的页面，排成一行。一个左，一个右。我想在一个响应式设计中重新定位两个孩子div。我该怎么办？

我已使用此HTML创建了该页面：

 <div id=contenitore class=clearfix>
<div class="imgsx"> Content </div>
<div class="txtdx"> Content.</div>
</div>

这是CSS。

#contenitore {
    position:relative;  
}

.txtsx {
    width:60%;  
    float:left;
}
.imgdx {
    width:40%;  
    float:right;

目前为止效果很好。

当我使用规则进行响应时，它不起作用。我需要将div txtsx放在移动设备上的txtsx全屏幕之上。

这是我用过的CSS：

 @media screen and (max-width: 60em)

#contenitore {
        clear: both;
        padding: 0px;
        margin: 0px;
    }

    .txtsx {
        width:100%; !important

    }
    .imgdx {
        width:100%; !important

Answer 1

普通CSS在左边浮动...

#contenitore {
    position:relative;  
}

.txtsx {
    width:60%;  
    float:left;
}
.imgdx {
    width:40%;  
    float:left;
}

在查询中调整大小浮动它们

 @media screen and (max-width: 60em) {
     .imgdx, .txtsx {
          float:none;
          width:100%;
     }
}

我认为你要求的是什么......

Answer 2

这就是你要求的：

CSS：

#contenitore {
    position:relative;
}
.imgsx {
    width: 60%;
    float: left;
}
.txtdx {
    width: 40%;
    float: right;
}
@media all and (max-width: 200px) {
    .txtdx, .imgsx {
        width: 100% !important;
    }
}

小提琴：http://jsfiddle.net/Hive7/MP3qP/2/

在响应式设计中重新定位子div

2 个答案: