Question

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

＆＃13;

.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;
}

＆＃13;

<!-- 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>

＆＃13;

Answer 1

如果你将它们包装成一个div，你可以在没有介入第三个div的情况下执行此操作...然后使用伪元素...如此：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我把左边的div分成了一个单独的div，给了2个div，总共81％的空间。它现在应该工作。这是fiddle

＆＃13;

.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;}

＆＃13;

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

＆＃13;

Answer 3

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

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

两个div向左浮动，一个浮在行

3 个答案: