css - 在主题化默认视图方面需要帮助

Question

更新：

如果我给 float: right 它不会显示在同一行。请查看随附的屏幕截图。就我而言， time 和 readmore 应该显示在同一行。

找到下面的代码：

<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
  <div class="views-field views-field-title"><span class="field-content"><a href="node/34">Test Node</a></span>  </div>  
  <div class="views-field views-field-field-description"><div class="field-content">Test Node Test Node Test Node Test Node Test Node Test </div>  </div>  
  <div class="views-field views-field-timestamp"><span class="field-content">Thursday, May 16, 2013 - 12:38</span>  </div>  
  <div class="views-field views-field-view-node"><span class="field-content"><a href="node/34">Read more</a></span>  </div>  </div>
</div>

查找当前输出：

所需输出：

我的CSS：

.views-field-title {
  font-size: medium;
  font-weight: bold;
  margin-bottom: 5px;
}

.views-field-field-description {
  margin-bottom: 5px;
}
.views-field-timestamp {
  bottom: 5px;
  left: 0;
  font-size: 0.7em;
  color: #C60E3B;
}

.views-field-view-node {
  border-bottom: 1px dotted #B2B5B6;
  margin-bottom: 5px;
  margin-top: 5px;
}

css 中的哪些更改可以产生所需的输出？

提前谢谢了....

Answer 1

这是 afloat:left;和的完美候选者float:right;。你基本上想要一些左和右的东西。

你可以看看这个工作的Fiddle。我添加了一些控制.view-content，然后定义 .views-field-timestamp为左右浮动.views-field-view-node。

Answer 2

演示

.views-field-timestamp {
    display:inline-block;
}

.views-field-view-node {
    display:inline-block;
    float:right;
}