排队的css元素并排

Question

我有以下内容：

HTML：

<li class="left">elem1</li>  <li class="right">elem2</li>
<li class="left">elem3</li>  <li class="right">elem4</li>

CSS：

li.left
{
    width:50%;
    float:left;
}

li.right
{
    width:50%;
    float:right;
}

不幸的是，elem1与elem2没有排列，因此3和4也是如此。 elem（1,2,3,4）由：

组成

<div>
  <h1>...</h1>
  <p>...</p>
</div>

并且可以有许多不同的尺寸，但我仍然希望它们排成一列。 任何想法如何通过保持相同的结构（没有<table>标签）来解决这个问题。

编辑： 这就是它的样子：

感谢。

Answer 1

虽然你在问题中没有多说，但我猜你在对齐不同高度的花车时遇到了问题。见图：

elem1的高度意味着其他元素最终会漂浮在它旁边而不是下面。

要解决此问题，您应该统一它们的浮动方式并清除浮动：

li.left{
    width:50%;
    float:left;
    clear:left; 
}

li.right{
    width:50%;
    float:left; /* <- even the right elems should be floated left */
    clear:right;
}

DEMO：http://jsfiddle.net/62rv2yg9/1/

然而...

浮动只是让人讨厌。使用内联块可能更好：

＆＃13;

＆＃13;

ul {list-style-type:none; margin:0; padding:0; border-bottom:2px solid #aaa;}
ul li{
    box-sizing: border-box; /* http://www.paulirish.com/2012/box-sizing-border-box-ftw/*/
    display:inline-block;
    width:50%;
    padding:10px;
    vertical-align:top;
    border-top:2px solid #aaa;
}
ul li h1 {margin:0; font-size:16px; color:blue;}
ul li p {margin:0;}

＆＃13;

<ul><!--
 note. no whitespace between elements (http://css-tricks.com/fighting-the-space-between-inline-block-elements/)
--><li><h1>elem1</h1><p>Lorem ispum</p></li><!--
--><li><h1>elem1</h1><p>Lorem ispum aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Donec sed odio dui.</p></li><!--
--><li><h1>elem1</h1><p>Lorem ispum curabitur blandit tempus porttitor. Donec sed odio dui.</p></li><!--
--><li><h1>elem1</h1><p>Lorem ispum</p></li>
</ul>

＆＃13;

＆＃13;

＆＃13;