左右对齐4个div吗？

-3

我有4个div，第1个应该在左边，第2个在右边，第3个在左边第1个，第4个在右边，在第2个div下面。问题，第4格是正确的，但拒绝上升。左右对齐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>

来源

2016-01-29 Advanced SEO

这种类型的问题问过很多次。使用一些JQuery插件：http://masonry.desandro.com/ – ketan

@ketan，真实的东西。如果我是你，我会在自举网格系统上投入一点时间。尝试在YouTube上搜索视频。 ps：如果你的html有一个小的错字 - >“class ='conainer'” –

我试图找到解决方案，即使经过很大的努力，我仍然无法解决这个问题。我不希望为此使用任何新的插件。任何帮助CSS？ –

我找到了！（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>

来源

2016-01-29 10:33:14

在拳头看这可能是解决方案。在我的测试页面上有效。我会在我的实际项目中测试它，并为您的答案投票，我希望它能起作用。给我几分钟。 –

很酷。我假设你给出的例子非常接近你的实际项目代码。 ;） –

忽略我添加到你的标记的.half类，顺便说一句。 –

使用CSS样式在您第4格

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

来源

2016-01-29 10:26:28

这个答案假设了很多关于布局的知识，主要是布局中右上角容器的高度。在大多数情况下可能不起作用。 –

是的，你说得对，我试过了。但是所有div的高度在页面之间是可以改变的，所以我肯定会有漏洞。 –

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

来源

2016-01-29 10:27:11

一个很好的，如果不是很重的话，建议。我喜欢砌体，并且Packery不断调整，所以我推荐它比砌体更高（我知道它们是由相同的metafizzy）。 –

如果没有其他的帮助，我会尝试wist脚本，然后我会更新我的进度。谢谢。 –

左右对齐4个div吗？

回答

相关问题