Question

我正在尝试在HTML中创建以下模式：

CellA        CellB
             CellC
CellD        CellE
             CellF

我正在尝试使用div和span的混合来执行此操作。我在div中创建 CellC ，因为浏览器总是在div（Source）之前和之后放置换行符。我还给这个div CSS属性 float：right ，以便它显示在右边（如上所示）。让它向右浮动是有效的，但我认为通过这样做我将删除div的默认属性，我认为是 display：block ，它放入换行符。即使我手动添加此属性，也没有任何影响。

以下是我正在尝试的代码（Along with a fiddle）：

HTML

<div>CellA
  <span class="floatRight">CellB</span>
</div>
<div class="both">
  CellC
</div>

<div>CellD
  <span class="floatRight">CellE</span>
</div>
<div class="both">
  CellF
</div>

CSS

.floatRight { float:right;}
.both {float: right; display: block;}

上面的代码会导致我的输出如下所示：

CellA        CellB
CellD   CellECellC
             CellF

Answer 1

将以下样式添加到类

.both { 
    float: right; 
    display: block; 
    width: 100%;  
    text-align: right; 
}

Answer 2

如果您可以更改HTML结构，那么这种方法对您来说很简单：

<强> HTML

<div class="clearfix">
    <div class="left">
        Cell A
    </div>
    <div class="right">
        <div>
            Cell B
        </div>
        <div>
            Cell C
        </div>
    </div>
</div>
<div class="clearfix">
    <div class="left">
        Cell D
    </div>
    <div class="right">
        <div>
            Cell E
        </div>
        <div>
            Cell F
        </div>
    </div>
</div>

<强> CSS：

.right {
    float: right;
}

.left {
    float: left;
}

.clearfix:after {
    content: "";
    clear: both;
    display: block
}

演示：https://jsfiddle.net/j0eqtzn2/2/

Answer 3

你为什么要使用浮动？如果没有＆＃34;好＆＃34;使用float的原因，因为float会从设计流中删除元素。

请尝试使用compact。

display inline-block

Answer 4

为您的问题添加其他解决方案，您可以使用flexbox执行此操作。试试这个：

<强> HTML：

<div class="flex-container">
  <div class="item">CellA</div>
  <div class="item">CellB</div>
  <div class="item">CellC</div>
  <div class="item">CellD</div>
  <div class="item">CellE</div>
  <div class="item">CellF</div>
</div>

<强>的CSS：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.item:nth-child(3n) {
  width: 100%;
  text-align: right;
  color: red;
}

Demo

但如果你不能使用flexbox，那么@Jaspreet Singh会回答它的正确答案。

Answer 5

如果你在这里使用DL而不是DIV那么它对你来说很容易。因为它看起来像标题和描述

这是演示

[查看演示] [1]

[1]: https://jsfiddle.net/j0eqtzn2/6/

使div浮动，同时保持换行符

5 个答案: