左右对齐4个div？ [复制]答案

【问题标题】：Align 4 divs left and right? [duplicate]左右对齐4个div？ [复制]
【发布时间】：2016-05-07 00:55:42
【问题描述】：

我有 4 个 div，第 1 个应该在左侧，第 2 个在右侧，第 3 个在左侧，第 1 个在左侧，第 4 个在右侧，在第 2 个 div 下。问题，第 4 个 div 向右对齐但拒绝向上。

如何解决第 4 个 div 的垂直对齐问题？

另外，我创建了打印屏幕图像，现在如何，应该如何，希望对您有所帮助？

http://s27.postimg.org/k3g2tvxwj/4_divs.png

<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>test</title>
  <style>
  .container {
    width: 90%;
    margin 0 auto;
    border: 2px solid #000;
    margin: 5px;
  }
  .align-left {
    width: 60%;
    float: left;
    border: 2px solid #000;
    margin: 5px;
  }
  .align-right {
    width: 35%;
    float: right;
    border: 2px solid #000;
    margin: 5px;
  }

  </style>
</head>

<body>

  <div>
    <header>
      <header>
        <div class="container">

          <div class="align-left">
            1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
          </div>

          <div class="align-right">
            2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2
          </div>

          <div class="align-left">
            3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3
          </div>


          <div class="align-right" style="color:red">
            4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4
          </div>


        </div>

  </div>
  <!-- #page -->
</body>

</html>

【问题讨论】：

这类问题以前问过很多次。使用一些 JQuery 插件，例如：masonry.desandro.com
@ketan，真的。如果我是你，我会在引导网格系统上投入一点时间。尝试在 youtube 上搜索视频。 ps：如果你的html有一个小错字-> "class='conainer'"
我试图找到解决方案，即使经过很大努力我仍然无法解决这个问题。我不想为此使用任何新插件。对 CSS 有帮助吗？
如果你不想使用bootstrap，那就做两个分区。把两个div放在一个wrapper div中，另外两个放在另一个wrapper div中。
我希望在移动设备上使用 100% 分辨率低于 1000px，然后将是这样的：div 1 的内容，div 2 的内容，然后 3 和 div 4 的内容. 如果我将 div 1 和 3 放在一个分区中，将 2 和 4 放在另一个分区中，我猜它会像这样在移动设备上：1、3、2、4？

标签： html css vertical-alignment

【解决方案1】：

我找到了！ (Hat tip to this post) 基本上是说将浮动从右侧容器中取出，它们将占用两个浮动左侧 div 周围剩余的可用空间：

* {
box-sizing: border-box;
}
.container{
width:100%;
outline: 2px solid #000;
padding: 5px;
}

.half {
  width: 50%;
  }

.align-left{
width:60%;
  float: left;
display: inline-block;
outline: 2px solid #000;
padding: 5px;
}

.align-right{
width:30%;

display: inline-block;
outline: 2px solid #000;
padding: 5px;
}

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>

</head>
<body>

<div>
<header>
<header>
        <div class="conainer">

            <div class="align-left">
            1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 
            1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 
            1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1           
            </div>

            <div class="align-right">
            2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 
            </div>

            <div class="align-left">
            3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 
             </div>


             <div class="align-right" style="color:red">
            4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 
             </div>


        </div>

</div><!-- #page -->
</body>
</html>

【讨论】：

乍一看这可能是解决方案。在我的测试页面上它可以工作。我将在我的实际项目中对其进行测试并为您的答案投票，我希望它会起作用。给我几分钟。
酷。我假设您提供的示例非常接近您的实际项目代码。 ;)
忽略我添加到您的标记中的 .half 类，顺便说一句。
它在一个寺庙上工作得很好，但在另一个寺庙上却不行，我需要检查模板之间是否有任何不同。谢谢，如果我以后需要帮助，我会在这里更新。
再次感谢@NathanielFlick，我在我的项目中成功实现了您的答案。我很高兴这个解决方案是纯 CSS，其他建议是使用引导网格系统、JQuery、插件。

【解决方案2】：

在第四个 div 上使用 css 样式

position:relative;
top: -100px; // change according to your requirement

【讨论】：

这个答案对布局做了很多假设，主要是布局中右上角容器的高度。可能不适用于大多数情况。
是的，你是对的，我试过了。但是所有 div 的高度在页面之间是可变的，所以我肯定会有洞。

【解决方案3】：

要做到这一点，最好使用masonry jQuery插件http://isotope.metafizzy.co

【讨论】：

一个很好的建议，如果不是严厉的话。我喜欢 Masonry，Packery 不断调整，所以我比 Masonry 更推荐它（我知道它们是同一个 metafizzy）。
如果没有其他帮助，我会尝试 wist 脚本，然后我会更新我的进度。谢谢。