Question

我想知道如果可能，如何在不改变HTML的情况下在同一行包含'Quality Analyst'，'Celestica Sdn Bhd'和'MYR 2xxx'

html：

<div class="colMiddle resume-detail-item-middle">
    <div class="pageRow resume-detail-position long-text-word">Quality Analyst</div>
    <div class="pageRow resume-company-location long-text-word">Celestica (AMS) Sdn. Bhd.</div>
    <div class="pageRow resume-detail-item-inner resume-margin">
        <div class="resume-detail-item-inner-left resume-summary-heading resume-label">Monthly Salary</div>
        <div class="resume-detail-item-inner-middle resume-summary-heading">MYR&nbsp;2,515</div>

... missing html

以更清晰的方式：

<div class="outter-containement">
    <div class="inner-content-1">inner-content-1</div>
    <div class="inner-content-2">inner-content-2</div>
    <div class="inner-content-3">
        <div class="sub-inner-content-3-1">sub-inner-content-3-1</div>
        <div class="sub-inner-content-3-2">sub-inner-content-3-2</div>
    </div>
</div>

我如何在单行上对齐inner-content-1，inner-content-2和sub-inner-content-3-2

http://jsfiddle.net/K58S2/14/

Answer 1

尝试将样式属性display:inline-block;添加到所有三个类

例如：

.colMiddle {
    display: inline-block;
}

Answer 2

您可以对需要排队的每个display:inline;使用div。

Answer 3

更好的选择是将它们抛向跨度，如下：

<span> CONTENT </span>
<span> CONTENT </span>
<span> CONTENT </span>

但是，如果你坚持对齐div，那么这样就足够了：

<style type="text/css">
.example { float:left; }
</style>
<div class="example"> CONTENT </div>
<div class="example"> CONTENT </div>
<div class="example"> CONTENT </div>

Answer 4

我建议像这样更改HTML：http://jsfiddle.net/K58S2/11/

但是你说没有改变HTML，所以这里有一个CSS答案：http://jsfiddle.net/K58S2/7/

.resume-detail-position, .resume-company-location{
   float:left; 
   width:auto;
   clear:none;
   margin-right:7px;
}
.resume-company-location{
   margin-top:1px;   
}

Answer 5

我对你的问题不满意的方法是，你必须在outter容器中添加一个margin-right:，与容器保留的相同宽度为'MYR 2xxx'。然后，position:absolute; right:0;您的容器为'MYR 2xxx'，它将适合。

为了让你的分隔线对齐，你必须研究你的css并重新设计它，因为实际上，你的分隔线需要100％的宽度和clear:both;所以你必须管理所有这些因为甚至如果您尝试float:left容器，它将无效。

所以，简短的回答，是的，你只能用.css来做。但要为棘手的css重写/覆盖做好准备。

另一个方法是javascript，删除你的'MYR 2xxx'容器并在'Celestica Sdn Bhd'之后在正常流程中替换它。对于该方法，请研究jquery .detatch()，.append()，.appendTo()和insertAfter()。

看起来像jsFiddled here：

 $('.resume-detail-item-inner-middle.resume-summary-heading').insertAfter($('.pageRow.resume-company-location.long-text-word') );

但是你仍然需要重新修改你的CSS。

将三个div类放入同一行

5 个答案: