Question

我有以下内容：

<div class = "employee">           
       <img class = 'pic' src = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQfMDb1Qtu7gTDZTfnFR2XcPqrfkn27zeWASTBfczi-GGQAIKG_"/>           
        <div class = 'employeeDot'></div>
        <p class = 'employeeInfo'>
            First and Last<br>Phone Number<br>More information
        </p>            
    </div>

但是当我输入其中一个以上时，它们会叠加在一起。如何让它们并排排列？

我尝试过浮动并显示块，内联，块内联等，但似乎没有任何东西可以调整它们的位置。

这是我的CSS文件：

.pic {
    height: 150px;
    width: 150px;
    border-radius: 75px;
    position: absolute;
    z-index: 2
}

.employeeDot {
    background-color: maroon;
    height: 150px;
    width: 250px;
    border-radius: 0 75px 75px 0;
    position: absolute;
    float: left;
    left: 75px;
    text-align: left;
}

.employeeInfo {
    position: absolute;
    left: 175px;
    top: 0px;
    color: black;
    z-index:1;
}

.employee {
    background-color: yellow;
}

编辑：这是我的代码的链接，虽然它在这里不能正常工作。 Info块应该在每次单击时切换进出。但是现在我只是想让他们正确排队

http://jsfiddle.net/Taiwantimmy/RSMyd/

Answer 1

首先 - 不确定为什么你使用direct child selector >作为所有选择器的前缀，你可能想删除它（我看到你现在已经从你的问题中删除了这个）。

要使所有.employee块排成一行，you can use display:inline-block：

.employee {
    background-color: yellow;
    display:inline-block;
}

另一种方法是float them side by side (e.g float:left)，但需要清除浮动。

Answer 2

DIV是块元素 - 它们会扩展以填充宽度。

SPAN是内联元素 - 它们收缩只包含其内容。

您想在此处使用SPAN。

Answer 3

原来问题是.employee类的高度和宽度为0。只要我将类调整到适当的宽度和高度，浮动和内联块函数就会按预期工作

让我的<div>并排排列而不是堆叠</div>

3 个答案: