两个 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 将你的左边 div 分成了一个单独的 div 并给了 2 div 一个总共 81% space。它现在应该工作了。这是一个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 2

如果您的第三个 div 宽度不会改变，那么您可以通过将以下 css 应用于第二个 div （行）轻松实现您想要的 -
margin-right: 140px;

确保增加右边距以在第 3 行和第 3 行之间创建一个小间隙 div。 http://jsfiddle.net/mc7d1Laj/1/

Answer 3

如果你将它们包装成一个 div，你可以在没有第三个干预的情况下做到这一点 div...然后使用伪元素......像这样：

* {
  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>

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

Two divs float left, one float right in row

html

css

css-float