如何将div放到另一行？

Question

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

代码如下所示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

实际上，我必须使用反应来制作它。所以你的两个答案都使用了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>

      });

Answer 1

你必须清除float和那将会这样做！

在您的wrapper中添加了card课程并将此样式应用于其中：

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

编辑2 ：

使用此代替psuedo元素样式：

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

希望这适合你

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;