0

大家好，我有两个 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。请帮我。

4

4 回答 4

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;
  }

}
于 2013-10-24T11:40:01.843 回答
0

也使用浮点数#slider代替margin: 0 33%;

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

}
于 2013-10-24T11:29:11.223 回答
0

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

@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 元素，然后使用浮点数。

于 2013-10-24T11:49:19.247 回答
0

使用Float:right属性来实现这一点

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

于 2013-10-24T11:37:58.673 回答