如何将 div 放到另一行？

Question

我有一个这样的项目http://codepen.io/zhangolve/pen/WGvbNv，我想把'nextrow'div放到另一个row.what我应该怎么做？

代码如下所示：

.card {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  transition: 0.3s;
  width: 30%;
  float: left;
  margin: 1%;
  font-size: 12;
  color: blue;
}

<div>
  <div class='card'>
    <p><span>TEST</span><span> A </span>
    </p>
    <p><span>TEST</span><span> B</span>
    </p>
    <p><span>TEST</span>  <span> C</span>
    </p>

  </div>
  <div class='card'>
    <p><span>TEST</span><span> A </span>
    </p>
    <p><span>TEST</span><span> B</span>
    </p>
    <p><span>TEST</span>  <span> C</span>
    </p>

  </div>
  <div class='card'>
    <p><span>TEST</span><span> A </span>
    </p>
    <p><span>TEST</span><span> B</span>
    </p>
    <p><span>TEST</span>  <span> C</span>
    </p>

  </div>
</div>
<div id='nestrow'>
  <h2>test </h2>
</div>

其实，我必须用react来实现。所以你的两个答案都使用了preudo-element，但是在react中，没有style.How我可以通过react来达到同样的效果吗？我的反应部分代码是这样的：

  var Message = React.createClass({


     render: function() {  
    var style = {
    card: {
    boxShadow: '0px 0px 10px rgba(0,0,0,0.5)',
    transition: '0.3s',
    width: '30%',
    float:'left',
    margin:'1%',
    fontSize: '12'
        }



    };
    return (

        <div>

        <div>
        <div style={style.card}>
            <p><span>TEST</span><span> A</span></p>
            <p><span>TEST</span><span> B</span></p>
            <p><span>TEST</span><span> C</span></p>

        <div>
        <div   style={style.card}>
            <p><span>TEST</span><span> A</span></p>
            <p><span>TEST</span><span> B</span></p>
            <p><span>TEST</span><span> C</span></p>
        </div>
         <div  style={style.card}>

            <p><span>TEST</span><span> B</span></p>
            <p><span>TEST</span><span> C</span></p>
        </div>

        </div>

        <div>
        <h2>test</h2>

        </div>
        </div>

      });

Answer 1

您必须清除 float 就可以了！

已将 wrapper class 添加到您的 card 并对其应用此样式：

.wrapper:after {
  content: '';
  display: block;
  clear: both;
}

让我知道您的反馈。谢谢！

.card {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  transition: 0.3s;
  width: 30%;
  float: left;
  margin: 1%;
  font-size: 12;
  color: blue;
}
.wrapper:after {
  content: '';
  display: block;
  clear: both;
}

<div class="wrapper">
  <div class='card'>
    <p><span>TEST</span><span> A </span>
    </p>
    <p><span>TEST</span><span> B</span>
    </p>
    <p><span>TEST</span>  <span> C</span>
    </p>

  </div>
  <div class='card'>
    <p><span>TEST</span><span> A </span>
    </p>
    <p><span>TEST</span><span> B</span>
    </p>
    <p><span>TEST</span>  <span> C</span>
    </p>

  </div>
  <div class='card'>
    <p><span>TEST</span><span> A </span>
    </p>
    <p><span>TEST</span><span> B</span>
    </p>
    <p><span>TEST</span>  <span> C</span>
    </p>

  </div>
</div>
<div id='nestrow'>
  <h2>test </h2>
</div>

编辑 2:

使用这个代替 psuedo 元素样式：

<div style="clear: both"></div>

希望这对你有用

.card {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  transition: 0.3s;
  width: 30%;
  float: left;
  margin: 1%;
  font-size: 12;
  color: blue;
}

<div class="wrapper">
  <div class='card'>
    <p><span>TEST</span><span> A </span>
    </p>
    <p><span>TEST</span><span> B</span>
    </p>
    <p><span>TEST</span>  <span> C</span>
    </p>

  </div>
  <div class='card'>
    <p><span>TEST</span><span> A </span>
    </p>
    <p><span>TEST</span><span> B</span>
    </p>
    <p><span>TEST</span>  <span> C</span>
    </p>

  </div>
  <div class='card'>
    <p><span>TEST</span><span> A </span>
    </p>
    <p><span>TEST</span><span> B</span>
    </p>
    <p><span>TEST</span>  <span> C</span>
    </p>

  </div>
  <div style="clear:both"></div>
</div>
<div id='nestrow'>
  <h2>test </h2>
</div>

Answer 2

试试这个。

.row{
  display: inline-block;
  width: 100%;
}

.card{
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  width: 30%;
  margin-right: 5%;
  float: left;
}

.card:last-child{
  margin-right: 0;
}

.card span{
  display: block;
  font-size: 12px;
  color: blue;
}

<div class="row">
  <div class="card">
    <p>
      <span>Test A</span>
      <span>Test B</span>
      <span>Test C</span>
    </p>
  </div>
  <div class="card">
    <p>
      <span>Test A</span>
      <span>Test B</span>
      <span>Test C</span>
    </p>
  </div>
  <div class="card">
    <p>
      <span>Test A</span>
      <span>Test B</span>
      <span>Test C</span>
    </p>
  </div>
</div>

<div class="row">
  <h2>Test</h2>
</div>

如何将 div 放到另一行？

How can I put a div to another row?

html

css

css-float

reactjs