Question

大家好我有两个div的最新消息，滑块

<div id="topcontent">
  <div id="latestnews"> Content1  </div>
  <div id="slider">   content2   </div>
</div>

我使用以下css

#topcontent {
  height:auto;
  margin-top:15px;
  overflow:hidden;
 }
#latestnews {
width:32%;
float:left;
height:auto;
}

#slider {
margin:0 33%;
width:67%;
position:relative;

}

@media handheld, only screen and (max-width: 767px) {

#latestnews {
    float:none;
    width:100%;    }
 #slider {
    margin:0;
    width:100%;    }
 }

当宽度达到767px内容时首先放置1个位置然后放入content2放置，当宽度达到767px时，实际上需要先放置content2。如何重新排列不同宽度的div。请帮帮我。

Answer 1

尝试位置属性，浮动到左侧。

@media handheld, only screen and (max-width: 767px) {

  #latestnews {
    float:left;
    width:100%;
    position:relative;
  }

  #slider {
    margin:0;
    width:100%;
    float:left;
    position:absolute;
  }

}

Answer 2

在#slider中使用浮动代替margin: 0 33%;

#slider {
/*margin:0 33%;*/
float: right;
width:67%;
position:relative;

}

Answer 3

使用Float:right属性来实现此目的

http://jsfiddle.net/Lubuu/7/演示

Answer 4

以下是使用绝对定位的一种方法。

@media handheld, only screen and (max-width: 767px) {
    #topcontent {
        position: relative;
    }
    #latestnews {
        margin: 51px 0 0 0;
        width: 100%;
        color: red;
    }
    #slider {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin:0;
        width: auto;
        height: 50px;
        display: inline-block;
        border: 1px dotted blue;
    }
}

如果您有滑块，则可能具有固定高度。如果是这种情况，请将#slider绝对定位到父块的顶部，然后向#latestnews元素添加上边距，以避免重叠元素。

请参阅演示：http://jsfiddle.net/audetwebdesign/8mJNV/

或者，您可以使用JavaScript或jQuery重新排列DOM元素，然后使用浮点数。

更改div窗口的位置正在调整大小

4 个答案: