2

嗨，我正在尝试让 2 个 div 在左侧与右侧对齐。

#div1 #div2
#div1 #div2
#div3 #div2
#div3
#div3

诀窍是当浏览器窗口变小时，我希望 #div2 位于 #div1 和 #div3 之间。

目前 #div3 仅在 #div2 之后开始，但在窗口缩小时正确落入到位

#div1 #div2
#div1 #div2
      #div2
#div3
#div3
#div3
4

2 回答 2

2

如果 div 碰巧有相同数量的元素（例如 3 个链接和用于更多链接的“更多”按钮）并且每一行都可以通过“覆盖：省略号”功能附加，以便每个 div 具有相同的高度，你会解决你的问题。

否则，如果 Div 2 是唯一出现在右侧的，您可以将其设置为显示在左侧的固定位置。

我只是在小提琴中测试了它。我真的很鄙视这样做，因为我认为它会影响您的成长能力，但是唉，我希望您以此作为学习示例：http: //jsfiddle.net/nugPA/

如果你把这条线去掉，它会回到一个简单的列：

div#two {position: fixed; left: 150px;}

过去曾多次提出此类问题。

于 2012-08-08T15:56:14.837 回答
1

这是你的想法吗？（手动缩小视口大小以查看实际的媒体查询。）

HTML

<div id="div1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
<div id="div2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
<div id="div3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>​

CSS

#div1, #div2, #div3 {
    width: 300px;
}

#div1 {
    border: 1px solid red;
}

#div2 {
    border: 1px solid lime;
    position: absolute;
    top: 0px;
    right: 0px;
}

#div3 {
    border: 1px solid cyan;
}

@media screen and (max-width: 600px) {
#div2 {
    position: static;
}
}

演示

http://jsfiddle.net/z9AsG/

于 2012-08-08T17:52:59.823 回答