Question

我的页面部分包含2列和2行文本。

第1行和第1行的列内容应始终在同一行中对齐。我面临的问题是它们不是。第2列在第1列下方排成一行或2行。这是小提琴中的行为，但在我的服务器中却是另一种方式。这发生在媒体查询中的较小屏幕kciks。

我有办法解决这个问题吗？

HTML代码：

<section class="carousel freedom container"> <!--Freedom section -->

<ul class="two-col left-col">
 <li class="pen"> <span class="icon-text"> <em>Work</em> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXT</span> </li>
<li class="arrow"> <span class="icon-text"> <em>Access </em> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXT</span> </li>
</ul>
<ul class="two-col right-col">
<li class="phone"> <span class="icon-text"> <em>Go </em> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT</span> </li>
<li class="download"> <span class="icon-text"> <em>Stay </em> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</li>
</ul>
</section>   <!--End of Freedom carousel -->

摆弄css：http://jsfiddle.net/LaL6c4cx/

Answer 1

您应该vertical-align: top;使用.left-col, .right-col课程。

JSFiddle - DEMO

<强> CSS：

.left-col, .right-col {
    list-style: none;
    width: 47%;
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

Answer 2

在UL的课程上添加垂直：

.left-col, .right-col {
    list-style: none;
    width: 47%;
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

请参阅jsFiddle

Answer 3

您可以使用display: table：

.container 
{
    max-width:1050px;
    margin: 0 auto; 
    display: table;/*Add display table*/
}

.left-col, .right-col {
    list-style: none;
    width: 47%;
    display: table-row;/*Add display table row*/
    margin: 0;
    padding: 0;
}

.two-col li {
    padding-left: 30px;
    margin-top: 20px;
    display: table-cell;/*Add display table cell*/
    padding-bottom: 30px;/*Add for the space between rows*/
}

fiddle

未对齐2行2列li标签内容

3 个答案: