div在div - 不知道如何做到这一点 [英] div under div - dont know how to do this

问题描述

我在我的网站中封锁，我想做这样的事情：
http ：//s13.postimg.org/6ue9a8bfr/Untitled_3.png

但我会发现这是：
http://s15.postimg.org/derz2m8h7/image.png

这是我的div csS：

  background-color：#ffffff; 
 width：37.2％; 
 border-top：4px solid black; 
 margin：14px 0.4％14px 0.4％; 
 float：left; 
 -webkit-border-radius：2px; 
 border-radius：2px; 
  

我该如何做？

谢谢！

解决方案

旧方式：

row（tr）和3 cells（td），将你的DIV放在这些单元格中，确保单元格是valign = top。

/ p>

使用3个代表您的列的容器DIV，将它们并排放置（float :)。

现代方式：

使用flexbox定位 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes 或使用CSS列 - *属性 http://playground.html5rocks.com/#columns

I have block in my site and i want to do something like that: http://s13.postimg.org/6ue9a8bfr/Untitled_3.png

but what happens to me is this: http://s15.postimg.org/derz2m8h7/image.png

this is my div csS:

        background-color: #ffffff;
        width: 37.2%;
        border-top: 4px solid black;
        margin: 14px 0.4% 14px 0.4%;
        float: left;
        -webkit-border-radius: 2px;
        border-radius: 2px;

How i can do this?

Thanks!

解决方案

Old way:

Use a table with 1 row (tr) and 3 cells (td), put your DIVs in those cells, make sure the cells are valign=top.

People that shun table layout way:

Use 3 container DIVs that will represent your columns, relatively position them side by side (float:).

Modern way:

Use flexbox positioning https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes or use the CSS column-* properties http://playground.html5rocks.com/#columns

这篇关于div在div - 不知道如何做到这一点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！