Question

嗨，我想让左边的两个div对齐，右边一个。

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

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

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

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

Answer 1

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

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

我只是在小提琴中测试它。我真的很鄙视这样做，因为我认为这会让你远离你的成长能力但唉，我希望你把它作为一个学习的例子：http://jsfiddle.net/nugPA/

如果你把这一行拿出来，那就回到一个简单的专栏：

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

过去曾多次询问过这样的问题。

Answer 2

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

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/

左侧1个右侧有2个div

2 个答案: