如何将div放到另一行？

I have a project like this http://codepen.io/zhangolve/pen/WGvbNv ,I want to put the 'nextrow' div to another row.what should I do?

我有一个像这样的项目http://codepen.io/zhangolve/pen/WGvbNv，我想把'nextrow'div放到另一行。我该怎么办？

The code looks like this:

代码如下所示：

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

actually,I have to use react to make it .so both of your answers use preudo-element,but in react ,there is no the style.How can I make the same effect by react? my react part code like this:

实际上，我必须使用反应来制作它。所以你的两个答案都使用了preudo-element，但是在反应中，没有风格。我怎么能通过反应做出同样的效果？我的反应部分代码如下：

  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>

      });

2 个解决方案

#1

You have to clear the floats and and that will do!

你必须清除浮子，这样就可以了！

Added wrapper class to your cards and applied this style to it:

为您的卡添加了包装类并将此样式应用于它：

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

Let me know your feedback. Thanks!

请告诉我您的反馈意见。谢谢！

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

EDIT 2:

编辑2：

Use this instead of psuedo element styling:

使用此代替psuedo元素样式：

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

Hope this works for you

希望这对你有用

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

#2

Try this.

尝试这个。

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

#1