Question

我在一行中有3个div，我如何得到中间div第一个，第一个div在第二个和第三个div在移动设备中排在最后？

<div class="first">hello first</div>
<div class="middle">hello Middle</div>
<div class="last">hello last</div>

.first {float:left; width:33%;}

.middle {float:left; width:33%;}

.last {float:left; width:33%;}

Answer 1

如果您根据自己的问题使用Bootstrap，那么还可以使用Bootstrap的pull / push类在每个断点的基础上指定div排序。假设您在移动设备上设置正确的顺序，首先：

<div class="row">
  <div class="middle col-md-4 col-md-push-4 col-sm-4">hello middle</div>
  <div class="first col-md-4 col-sm-4 col-md-pull-4 ">hello first</div>
  <div class="last col-md-4 col-sm-4">hello last</div>
</div>

http://jsfiddle.net/ximes/dw8n36jj/

有关详细信息/示例，请参阅：http://getbootstrap.com/css/#grid-column-ordering。

Answer 2

如果您将float:left提供给所有这些div，它们将会显示分别按照HTML中的顺序编写。
要使div显示在一行中，您需要将其显示为 inline-block因为默认情况下它们被显示为block。

<强>解决方案：

您只需要从float:left;和first元素中移除last，并使用display:inline-block与所有这些div一起使用，即使在移动设备上也会提供预期的结果。< / p>

<强>演示：

这是一个工作演示示例：

＆＃13;

.first {
  display: inline-block;
  width: 33%;
}

.middle {
  display: inline-block;
  ;
  float: left;
  width: 33%;
}

.last {
  display: inline-block;
  width: 33%;
}

＆＃13;

<div class="first">hello first</div>
<div class="middle">hello Middle</div>
<div class="last">hello last</div>

＆＃13;

Answer 3

您不需要额外的CSS来设置宽度。只需使用Bootstrap网格和列排序..

http://www.codeply.com/go/eMKtd3qzYU

<div class="container">
    <div class="row">
        <div class="middle col-sm-4 col-sm-push-4">hello Middle</div>
        <div class="first col-sm-4 col-sm-pull-4">hello first</div>
        <div class="laste col-sm-4">hello last</div>
    </div>
</div>

Answer 4

<div class="first">hello first</div>
<div class="middle">hello Middle</div>
<div class="last">hello last</div>
.first {display:inline-block; width:33%;}
.middle {float:left; width:33%;}
.last {display:inline-block; width:33%;}

https://jsfiddle.net/gaLo5s1o/

Answer 5

如果您使用的是bootstrap，请在第二个col-sm-push-4使用div，然后在第一个col-sm-pull-4使用div

Answer 6

以下是使用flexbox方法的示例代码。

＆＃13;

.parent{ display:flex; flex-direction:row;}
.parent div{ height:200px;width:33%;}
.first { background:red;}

.middle {  background:yellow;}

.last {  background:blue;}

@media screen and (max-width: 768px) {
    .parent {
      flex-direction: row; 
    }
    .parent div{
      width:100%; 
    }
    .first {
      order: 2;
    }

    .second{
     order: 1;
    }
    .third{
    order:3}
}

＆＃13;

<div class="parent">

<div class="first">hello first</div>
<div class="middle">hello Middle</div>
<div class="last">hello last</div>

</div>

＆＃13;

我在一行中有3个div，如何让中间div排在第一位，第一个div位于第二位，第三位div位于移动位置？

6 个答案: