两个div向左浮动，一个向右浮动

Question

我试图在一行中放置3个div。我有下面的代码，最大的问题是，第二个div不会结束第三次启动。该行也应该垂直对齐文本的中心。结果应该如下所示https://www.linksketch.com/XOfi 第一个div中的文本可能会因长度而异。所以我不能指定它的宽度（或第二个宽度）。

.activityType { 
 
    color: #007b87; 
 
    font-size: 20px; 
 
    float: left; 
 
    margin: 0 5px 0 0; 
 
} 
 

 
.lineActivities { 
 
    height: 1px; 
 
    margin-bottom: 10px; 
 
    margin-left: 10px; 
 
    background-color: #afbc16; 
 
    opacity: .4; 
 
    margin: 10px 10px 2px 0; 
 
    overflow: hidden; 
 
} 
 

 
.activityDate { 
 
    color: #007b87; 
 
    font-size: 15px; 
 
    float: right; 
 
    margin-right: 25px; 
 
    width: 140px; 
 
}

<!-- First div with text aligned to left. --> 
 
<div class="activityType"> 
 
    User created tiket 
 
</div> 
 

 
<!-- Second div with colored line going from 1. to 3. div (filling the gap). --> 
 
<div class="lineActivities"> 
 
</div> 
 

 
<!-- Third div with text. --> 
 
<div class="activityDate"> 
 
    23. 02. 2015 01:31:33 
 
</div>

Answer 1

你可以这样做而没有介入第三格，如果你将它们包装物品放入一个DIV ......然后使用伪element..like这样：

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.activity { 
 
    width: 80%; 
 
    margin: auto; 
 
    overflow: hidden; 
 
} 
 

 
.activity:after { 
 
    content: ''; 
 
    border-bottom: dotted 2px tomato; 
 
    display: block; 
 
    overflow: hidden; 
 
    height: 1.5em; /* controls position of line vertically */ 
 
} 
 

 
.activityType { 
 
    color: #007b87; 
 
    float: left; 
 
    margin-right: 1em; 
 
} 
 

 
.activityDate { 
 
    color: #007b87; 
 
    float: right; 
 
    margin-left: 1em; 
 
}

<div class="activity"> 
 
    <p class="activityType">User created ticket</p> 
 
    <p class="activityDate">23. 02. 2015 01:31:33</p> 
 
</div> 
 

 
<div class="activity"> 
 
    <p class="activityType">Lorem ipsum dolor sit amet.</p> 
 
    <p class="activityDate">23. 02. 2015 01:31:33</p> 
 
</div>

Answer 2

我分你的左边的div到一个单独的div并给出了2周的div的一个总的81％的空间。它应该现在工作。这里是一个fiddle

.activityType { 
 
    color: #007b87; 
 
    font-size: 20px; 
 
    width:auto; 
 
    float: left; 
 
    margin: 0 5px 0 0; 
 
} 
 

 
.lineActivities { 
 
    height: 1px; 
 
    margin-bottom: 10px; 
 
    margin-left: 10px; 
 
    background-color: #afbc16; 
 
    opacity: .4; 
 
    margin: 10px 10px 2px 0; 
 
    overflow-x: hidden; 
 
} 
 

 
#right .activityDate { 
 
    color: #007b87; 
 
    font-size: 15px; 
 
    float: right; 
 
    margin-right: 15px; 
 
    width:95%; 
 
} 
 
#left{overflow-x: hidden; width:81%;} 
 
#left, #right{display:inline-block;}

<div id ="left"><div class="activityType"> 
 
    User created tiket 
 
</div> 
 

 
<!-- Second div with colored line going from 1. to 3. div (filling the gap). --> 
 
<div class="lineActivities"> 
 
</div> 
 
</div> 
 
<div id ="right"> 
 
<!-- Third div with text. --> 
 
<div class="activityDate"> 
 
    23. 02. 2015 01:31:33 
 
</div>

Answer 3

如果你的第三个div宽度不会改变，那么你可以很容易地要与应用到第二div（线）以下的CSS实现什么 -
margin-right: 140px;

确保增加保证金的权利，以创建行和第三个div之间的小差距。 http://jsfiddle.net/mc7d1Laj/1/